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

先发发牢骚，万恶的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>