申明:图片跟内容无关,嘿嘿 只是最近 飞鱼迷恋上M8了^_^

RT，昨天写一个页面的时候，给一个input加背景图的时候发现的问题。
代码如下：
html部分:

<input class="text" type="text" value="" />


css部分:

#searchBox input.text{
  width: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{
  *width: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 能够解决的话，那上面的代码就可以省了··=.=

哟？不错哎 订阅飞鱼的RSS Feeds 回去慢慢看^_^

您可能还对这些日志感兴趣