| 标题 | 表单button的text-indent |
| 范文 | HTML HTML CSS Code 在这个实例中，通过图片背景来制作Button,采用了图片替代文字最常用的一种方法“text-indent”来制作 #btn { width:114px; height:37px; border: none; background: transparent url(images/submit_btn.gif) no-repeat center; overflow: hidden; text-indent: -999px; } 上面代码，在现代浏览器中不会有任何问题，可是在IE下“text-indent:-999px”是不起作用的，请看效果图： 如何解决 为了让各浏览器下能正常化显示，我一般碰到这样的问题都是在上面的代码基础上加上“font-size和line-height之类的设置”: #btn { width:114px; height:37px; border: none; background: transparent url(images/submit_btn.gif) no-repeat center; overflow: hidden; text-indent: -999px; font-size:0; line-height:0; display:block; } 这样一来就能达到各浏览器下一样的效果了。最后我们在来看看他是如何工作的。或者说为什么要加上这几行代码？ font-size:0加上font-size:0后，可以解决IE7下显示文字的问题（换句话来说，通过设置font-size等于0后，button在IE7浏览器中不会显示文本出来，达到想要的效果），但是在IE6下会有明显的一条直线，而且线条色和前景色相同。 line-height:0第一条中说过了，font-size只有解决IE7下的问题，留下了一条直线在IE6中显示，要解决这个问题也简单，我们可以通过line-height设置为0来解决。 display:block将button按块元素显示 这就是为何要这样设置的原因了。有时候在这样设置了以后还会给你的button留下一个小点点，我一般是通过color来设置： #btn { width:114px; height:37px; border: none; background: transparent url(images/submit_btn.gif) no-repeat center; overflow: hidden; text-indent: -999px; font-size:0; line-height:0; display:block; color: #fff; text-align: right; } 这有一个小技巧需要特别注意：这里的color色选择其背景相近的色，让人肉眼看不出来， 一般是将其文本放置左边或右边，然后择其最相近的颜色做为背景色。比如这个实例，可以选了白色。 |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。