IE6 BUG:Make Input Text Hidden Css Bug

在网页设计时,有时需要对搜索框等input元素设定背景图来替换原有的元素样式,而其input按钮上的文字在隐藏的时候,ie就抽风了:

IE Bug & Problem:

设定display:block; text-indent:-90000px; ----------对IE6,7无效
因为:对input设置text-indent属性的负值 ,ie6、7整个input会被移动,而且文字依然存在
这是一个关于ie text-indent 的 bug。

 这里提供出HACK来解决

Solution:

就是针对IE6/7使用line-height为较大的高度,然后对其父级容器指定较小的高度(设定父级div的height=背景图的submit按钮的高度),同时设定overflow:hidden;。

较大的高度一般以显示器的高度为参照,以搜索框而言,设定其为999px就好,通用。

CSS设定大致如下:

对input 设定:
inputself { line-height: 999px; /* Set it higher than your image height */
                  overflow: hidden; /* Hide the text */ }

对其父级元素设定高度,并设定溢出隐藏

inputfather {height:30px; overflow:hidden;}
 

出处:http://www.sharpdotinc.com/......../ie-hack-hide-text-on-your-submit-buttons/