异变: input的背景background

11 Jun 2009

2009年6月11日 1:07 am - 代码浅谈 - css

申明:图片跟内容无关,嘿嘿只是最近飞鱼迷恋上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 回去慢慢看^_^

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

该文章已经被摸了727次。共有 25 条评论

1. 依恋飞 2009年6月11日 at 1:20₪

哈哈！魅族的手机！还有王力宏！都是我喜欢的！

回复
飞鱼 Reply:
June 11th, 2009 at 1:21
汗“`半夜不睡觉““

回复
2. aunsen 2009年6月11日 at 14:07₪

M8很拉轰！

回复
3. wisteriaflash 2009年6月11日 at 18:44₪

我也遇到过这样的问题，呵呵

回复
飞鱼 Reply:
June 11th, 2009 at 22:38
英雄所见略同啊 ` `呵呵

回复
4. bigCat 2009年6月14日 at 3:23₪

这问题偶就直接用父元素背景+透明input了
也不用hack…因为所有浏览器都吃这一套…

回复
葉子 Reply:
June 14th, 2009 at 16:20
以前我用input[type=text]，可是ie6不支持，属性选择符ie6的支持真差，纠结ie6很多选择符都不支持

回复
飞鱼 Reply:
June 14th, 2009 at 16:49
这样的做法非常不可取~~~一棒子打死了所有input

回复
葉子 Reply:
June 14th, 2009 at 17:20
看你页面咯，可去不可取，适用于你的设计的就是可取的

回复
bigCat Reply:
June 16th, 2009 at 11:31
哈,还要考虑以后二次开发和维护
达到目的方案肯定有很多种
选择最优的
如果慎重点,或不熟悉,就每种方案的有点缺点列出来对比下
真正的高手,都命令行了,挖哈哈

回复
5. 托尔·银月 2009年6月14日 at 11:14₪

飞鱼也用M8？
M8用户飘过

回复
飞鱼 Reply:
June 14th, 2009 at 12:16
嘎嘎计划着去弄一只

回复
托尔·银月 Reply:
June 14th, 2009 at 12:24
不得不说，新手勿入喔~~
固件暂时不够稳定（不过三个月来不断进步的说，现在死机少了）~~
没有QQ（我是无所谓）~~~
飞信也没有官方版本（非官方版本很好很简洁—就是要cmnet接入）
可喜的是，有UC的专门版~哈哈

回复
飞鱼 Reply:
June 14th, 2009 at 12:28
嘎嘎“ 就是想入手个M8 然后做些好玩的东东,比如程序“^_^

觉得M8挺好看的

回复
托尔·银月 Reply:
June 14th, 2009 at 12:31
热情邀请飞鱼入伙~~~
又一个软件作者~~
哈哈！！！

回复
6. 葉子 2009年6月14日 at 16:16₪

怎么我不能留言

回复
飞鱼 Reply:
June 14th, 2009 at 16:19
================================
该用户发言已被绿*坝软件自动屏蔽
================================

回复
葉子 Reply:
June 14th, 2009 at 16:20
哪泥，啥？？

回复
飞鱼 Reply:
June 14th, 2009 at 16:21
================================
该用户发言已被绿*坝软件自动屏蔽
================================

回复
葉子 Reply:
June 14th, 2009 at 16:22
无聊，闪了，真无聊

回复
葉子 Reply:
June 14th, 2009 at 16:22
我的rp怎么会被“绿*坝”？！开玩笑，老实交代，是不是你动手脚了

回复
飞鱼 Reply:
June 14th, 2009 at 16:25
什么情况“`? 你装绿*坝啦 … 很好,我也装了

回复
7. zhiyu.linzy 2009年6月19日 at 16:53₪

鱼儿毕业了呵

回复
8. 葉子 2009年6月27日 at 19:20₪

很久不更新啦，死鱼

回复
9. Anonymous 2009年12月12日 at 21:45₪

草上飞鱼？？
我也碰到同样的问题了

回复