IE文本输入框input背景图的兼容性解决方案
2012-05-16 16:35 臭小子1983 阅读(686) 评论(0) 编辑 收藏 举报问题描述:
在IE浏览器下,设置文本框的背景图片,当文本框内文字超过文本框的宽度,且光标位于超过文本框长度的文字段的位置时,文本框的背景就会随文本框内的隐藏文字而移动。
发生条件:
- IE浏览器
- 文本输入框,且设置了背景图片
- 文本框文字超过其宽度
- 光标位于超过文本框宽度的文字后
解决的方法:
使用一个内联元素包含文本框,以内联元素的背景图片为文本框的背景。具体的实现方法是:
- 隐藏文本框的边框,设置文本框的背景为透明
- 将内联元素包含框设置为内联块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 > |