欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

IE6的input,如果设置了宽度,多输入一些字符,input会被顶跑?_html/css_WEB-ITnose

程序员文章站 2022-05-19 13:35:55
...


.se_name{ width: 110px; height: 23px; background: url(../images/search_bg.jpg) no-repeat; color: #c0c0c0; border: none; margin-right: 8px; line-height: 23px; padding-left: 4px;}


如果输入的字符宽度不超过设置的宽度,显示正常
在IE6下 若输入字符超过设置的宽度,就会出现被顶到左边的情况

该如何解决这个问题呢


回复讨论(解决方案)

重构下html

重构下html



我说的是这个意思,刚开始显示正常的时候是这张图

如果输入字符过多,就变成下面这样了

给文本框设置一个合适的宽度值(width)。不过你用border:0和背景图片的方式来表现文本框的边框还是很难做到精确控制的,比如设置文本框宽度为100px,在标准浏览器下查看盒子模型,宽度就是100px,但在IE6/7/8下面查看是102px,浏览器之间存在差异。

刚刚看得不够仔细,原来你已经设置了宽度值。用IETester的IE6.0模式测试没有出现你说的这种情况,背景图片的边框宽度与设置宽度110px一样吗?

设置background-attachment属性为fixed.
background: url(../images/search_bg.jpg) no-repeat fixed;
不知有没有实现你希望的效果?

设置background-attachment属性为fixed.
background: url(../images/search_bg.jpg) no-repeat fixed;
不知有没有实现你希望的效果?
多谢,解决了

给文本框设置一个合适的宽度值(width)。不过你用border:0和背景图片的方式来表现文本框的边框还是很难做到精确控制的,比如设置文本框宽度为100px,在标准浏览器下查看盒子模型,宽度就是100px,但在IE6/7/8下面查看是102px,浏览器之间存在差异。
多谢讲解,还没注意这个呢

那么你在火狐下 那个文本框背景 还显示吗?