代码改变世界

IE文本输入框input背景图的兼容性解决方案

2012-05-16 16:35  臭小子1983  阅读(700)  评论(0)    收藏  举报

问题描述：

在IE浏览器下，设置文本框的背景图片，当文本框内文字超过文本框的宽度，且光标位于超过文本框长度的文字段的位置时，文本框的背景就会随文本框内的隐藏文字而移动。

发生条件：

  1.  IE浏览器
  2.  文本输入框，且设置了背景图片
  3.  文本框文字超过其宽度
  4.  光标位于超过文本框宽度的文字后

解决的方法：

使用一个内联元素包含文本框，以内联元素的背景图片为文本框的背景。具体的实现方法是：

  1. 隐藏文本框的边框，设置文本框的背景为透明
  2. 将内联元素包含框设置为内联块inline-block，设置内联元素包含框的背景图片

实例：

01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02 <html xmlns="http://www.w3.org/1999/xhtml">
03 <head>
04 <title>input背景的兼容性</title>
05 <style type="text/css">
06 *{margin:0;padding:0;}
07  
08 p{padding:20px;}
09  
10 .ctl{background:transparent url(http://www.itref.cn/uploads/allimg/100623/1_100623185657_1.gif) no-repeat scroll 2px top;line-height:19px;width:150px;height:20px;padding-left:25px;border:1px solid #DDD;}
11  
12 .ctl_wraper{background:transparent url(http://www.itref.cn/uploads/allimg/100623/1_100623185657_1.gif) no-repeat scroll 2px top;display:inline-block;width:150px;height:20px;padding-left:25px;border:1px solid #DDD;}
13  
14 .ctl_wraper input{background-color:transparent;width:150px;padding-top:2px;border:0 none;}
15 </style>
16 </head>
17 <body>
18 <h1>IE浏览器下，可查看区别</h1>
19 要查看区别，请将光标置于文本框内的文字末尾。
20 <p>
21     出现问题<br />
22     <input class="ctl" type="text" value="欢迎来到插件吧|chajian8.com！这个是input背景图片兼容性实例" />
23 </p>
24 <p>
25     兼容解决<br />
26     <span class="ctl_wraper"><input type="text" value="欢迎来到插件吧|chajian8.com！这个是input背景图片兼容性实例" /></span>
27 </p>
28 </body>
29 </html>