itRef.cn技术参考网站

当前位置: 主页 > CSS >

文本输入框input背景的兼容性解决

时间:2010-06-23 18:43来源:未知 作者:adm_ref 点击:
问题描述: 在IE浏览器下,设置文本框的背景图片,当文本框内文字超过文本框的宽度,且光标位于超过文本框长度的文字段的位置时,文本框的背景就会随文本框内的隐藏文字而移动。 发上条件: 1. IE浏览器 2. 文本输入框,且设置了背景图片 3. 文本框文字超过

问题描述:

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

发上条件:

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

解决的方法:

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

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

实例:


 提示:您可以先修改部分代码再运行


 

 

(责任编辑:wiwi) 转载请注明 来源于itRef.cn技术参考网站:
顶一下
(1)
50%
踩一下
(1)
50%
------分隔线----------------------------
栏目列表
推荐内容