隐藏Submit buttons的方案

04月17日

分类:前端 标签:ButtonIE 评论:[0]

在很多项目中，按钮用自定义背景代替默认的按钮背景及文字，这就要求页面重构师，把默认文字隐藏起来。其实不是一个难题，但在IE里，就要用到一点小技巧了！

1.Html code

1.  
2. <input type=”submit” value=”Submit” class=”button”/>
3.  

2.Style Sheet

1. input.button {
2. width:114px;
3. height:37px;
4. border: none;
5. background: transparent url(images/submit_btn.gif) no-repeat center;
6. overflow: hidden;
7. text-indent: -999px;
8. }

在固定width, overflow:hidden 和 负值的text-indent就能实现隐藏按钮的文字，所有浏览器除IE外支持良好。

3.Problem

我们可以看到在IE里，文字必没有出现我们预期想要的效果。

4.IE Fix

在原来的CSS上，增加额外3行红色定义

1. input.button {
2. width:114px;
3. height:37px;
4. border: none;
5. background: transparent url(images/submit_btn.gif) no-repeat center;
6. overflow: hidden;
7. text-indent: -999px;
8.  
9. font-size: 0;
10. display:block;
11. line-height:0
12. }

5.原理

font-size:0  用来减少字体大小。但在IE6里，你认真看，会发现一条black line在按钮的中间。

display:block  在IE里，负值的text-indent才有效果

line-height:0  fix IE6