解决input设置背景后，在ie7下浏览内容过长背景跟着滚动
生活随笔
收集整理的這篇文章主要介紹了
解决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>
方法：用img or div(加背景）通過position定位。此法沒有做，只是個思路，也應該能實現，不過兼容性是個問題。又得hack。
ps:以上測試瀏覽器ie7/8、firefox、chrome、opera、safari。機器上沒有ie6所以沒測。
轉載于:https://www.cnblogs.com/lonny/archive/2011/04/13/2012981.html
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的解决input设置背景后，在ie7下浏览内容过长背景跟着滚动的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 地籍宗地出图（一）
- 下一篇： 识图在线识图_水电腾讯课堂开课啦~学习建