解决input设置背景后，在ie7下浏览内容过长背景跟着滚动

时间：2011-04-13 来源：jewely

先发发牢骚，万恶的IE啊。这么点问题害我走弯路，浪费时间，浪费生命。本以为加上background-attachment:fixed;问题就没了，结果问题依然存在，查资料说好像是ie bug。无语，天杀的IE，谁叫人家IE是老大呢，还得想办法啊。

方法一：此法也是最简单的，那就是设定可输入长度。不过觉得有点旁门左道。

View Code

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2  <html xmlns="http://www.w3.org/1999/xhtml">
 3  <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5     <title>test</title>
 6     <style type='text/css'>
 7     input{
 8         background:url(images/login_usr.gif) no-repeat;
 9         border:none;
10         width:186px;
11         height:26px;
12     line-height:26px;
13         padding:0 20px;
14     }
15     </style>
16  </head>
17  <body>
18     <div id='main'>
19        <input type='text' id='usr' maxlength="20"/>
20     </div>
21  </body>
22  </html>

方法二：将背景设置到父元素,再具体设置input css样式

View Code

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2  <html xmlns="http://www.w3.org/1999/xhtml">
 3  <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5     <title>test</title>
 6     <style type='text/css'>
 7     #main{
 8             background:url(images/login_usr.gif) no-repeat;
 9             width:226px;
10             height:26px;
11         line-height:26px;
12     }
13     input{
14             width:204px;
15         margin-left:20px;
16             height:22px;
17         line-height:22px;
18             border:0;
19     }
20 </style>
21 </head>
22 <body>
23     <div id='main'>
24        <input type='text'/>
25     </div>
26 </body>
27 </html>

方法：用img or div(加背景）通过position定位。此法没有做，只是个思路，也应该能实现，不过兼容性是个问题。又得hack。

ps:以上测试浏览器ie7/8、firefox、chrome、opera、safari。机器上没有ie6所以没测。