RT,昨天写一个页面的时候,给一个input加背景图的时候发现的问题。
代码如下:
html部分:
<input class="text" type="text" value="" />
css部分:
#searchBox input.text{
230px;
height:20px;
padding:5px 5px 0px;
border:none;
background:url(../images/skin.gif) no-repeat 0 -100px;
font-size:14px;
}
效果图:
经过测试所有浏览器都OK,然后对input进行输入溢出测试(就是输入好多好多字),就发现了这个问题,看下图,
发现溢出测试对FF,谷歌都ok ,就是该死的IE异变了,通过测试IE6,IE7都有这样的情况(IE8偶米装)
然后为了解决这个问题我绞尽脑浆,针对IE做了如下调整才搞定,不知道有么有更好的方法,有的话分享下呢。
html部分修改(套了个套子):
<span id="searchBoxTxt">
<input class="text" type="text" value="请输入书名" />
</span>
css部分修改(增加了两个hack样式):
#searchBox #searchBoxTxt{
*230px;
*padding:0 5px;
*background:url(../images/skin.gif) no-repeat 0 -100px;
}
#searchBox input.text{
*padding:5px 0px 0px;
*background:none;
}
经过测试IE下圆满解决,因为使用的是hack法,html部分用的是span,所以对其他浏览器无伤害,
就这样,这个问题暂时告一段落。^_^
补充:
其实 中间我尝试过使用background-attachment:fixed; 但是发现么作用。不知道是真的么有左右还是我使用有问题,
如果background-attachment:fixed 能够解决的话,那上面的代码就可以省了··=.=