解决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下浏览内容过长背景跟着滚动相关推荐

onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案)
onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案) 参考文章: (1)onchange监听inpu ...
tomcat下只有.class文件没有java文件_解决tomcat发布工程后,WEB-INF/classes下文件不编译的问题...
今天部署项目到tomcat,发布完后,启动tomcat,报class not found: 临时找了个解决方案,由于项目是copy过来的,于是就将原来项目的classes下面编译好的class文件也一 ...
解决Button设置disabled后无法执行后台代码问题
一.开始调式下面的程序,发现Button在js中设置disabled后无法执行后台代码(btnsave_Click)问题 <asp:Button ID="btnsave" r ...
Google Chrome input 设置 line-height 后光标变得和input一样高
Google Chrome input的height和line-height设置为相同的比默认高度高的值时,当input控件获得焦点并且没有输入内容时,input中的光标会占满整个input控件(如果 ...
Windows10用fiddler抓包Android应用（解决手机设置代理后无法上网，设置只抓app包）
#1.环境准备 1.电脑上安装fiddler #2.设置 1.fiddler>Tools>Fiddler Options>Connections 勾选Allow remote com ...
onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案)...
转自:https://www.cnblogs.com/white0710/p/7338456.html 1. onchange事件监听input值变化的使用方法: <input id=" ...
解决：ubuntu16安装后mnt/hgfs下没有设置的共享目录
这没有挂载的原因.解决办法如下解决办法: 1.apt-get install open-vm-tools open-vm-dkms 2.使用命令: vmhgfs-fuse .host:/ /mnt/ ...
解决Jenkins设置管理员后登陆提示：Access Denied admin没有Overall/Read权限
背景: 1.设置管理员密码后,再次登陆提示:Access Denied Administrator is missing the Overall/Read permission 2.或者设置完权限出现 ...
终极方案！解决正确设置LaunchImage后仍然不显示的问题
对于如何设置LaunchImage,网络上有各种各样的教程. 主要分2点: 1. 正确设置图片尺寸 2. 取消LaunchScreen.xib 但是经过上述步骤之后,你觉得完全没有问题了,但是仍然无法 ...

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

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

最新文章

热门文章