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;
}


效果图:
异变: input的背景background

发现溢出测试对FF,谷歌都ok ,就是该死的IE异变了,通过测试IE6,IE7都有这样的情况(IE8偶米装)

然后为了解决这个问题我绞尽脑浆,针对IE做了如下调整才搞定,不知道有么有更好的方法,有的话分享下呢。
html部分修改(套了个套子):

<span >
   <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 能够解决的话,那上面的代码就可以省了··=.=

相关文章:

  • 2022-02-28
  • 2022-01-08
  • 2021-04-20
  • 2022-12-23
  • 2022-12-23
  • 2021-12-06
  • 2021-12-06
猜你喜欢
  • 2021-12-06
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-12-06
  • 2021-12-06
  • 2021-11-12
相关资源
相似解决方案