在很多项目中,按钮用自定义背景代替默认的按钮背景及文字,这就要求页面重构师,把默认文字隐藏起来。其实不是一个难题,但在IE里,就要用到一点小技巧了!
1.Html code
- <input type=”submit” value=”Submit” class=”button”/>
2.Style Sheet
- input.button {
- width:114px;
- height:37px;
- border: none;
- background: transparent url(images/submit_btn.gif) no-repeat center;
- overflow: hidden;
- text-indent: -999px;
- }
在固定width, overflow:hidden 和 负值的text-indent就能实现隐藏按钮的文字,所有浏览器除IE外支持良好。
3.Problem
我们可以看到在IE里,文字必没有出现我们预期想要的效果。
4.IE Fix
在原来的CSS上,增加额外3行红色定义
- input.button {
- width:114px;
- height:37px;
- border: none;
- background: transparent url(images/submit_btn.gif) no-repeat center;
- overflow: hidden;
- text-indent: -999px;
- font-size: 0;
- display:block;
- line-height:0
- }
5.原理
font-size:0 用来减少字体大小。但在IE6里,你认真看,会发现一条black line在按钮的中间。
display:block 在IE里,负值的text-indent才有效果
line-height:0 fix IE6