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

WBOY
풀어 주다: 2016-06-24 12:14:01
원래의
1205명이 탐색했습니다.



.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,浏览器之间存在差异。
多谢讲解,还没注意这个呢

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿