博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

异变: input的背景background

Posted on 2010-11-14 21:34  linFen  阅读(4327)  评论(0编辑  收藏  举报

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