IE6/IE7 下 text-indent 导致标签消失

[ 博客 ]

很多时候,我们会将一些按钮做成图标或者其他背景图片形式,出于SEO的考虑,我们会保留按钮、图标的文字,使用 text-indent 和 inline-block 来隐藏文字。例如:

HTML:

<a href="#" class="btn">立即下载</a>

CSS:

.btn{width:85px; height:25px;display:inline-block;text-indent:-999em;background:url(btn.jpg) no-repeat 0 0;}

这在标准浏览器下是没问题的,但是在 IE6/IE7 下会发现整个a标签消失!造成这种情况的原因应该是 IE6/IE7 并没有真正实现 inline-block ,而是通过设置 display:inline-block 触发了IE的 layout,从而使内联元素拥有了 inline-block 属性的表症。

面对这种问题有两种简单的解决方法:

方法一:将 text-indent:-999em; 改成 font-size:0; line-height:0;

CSS:

.btn{width:85px; height:25px;display:inline-block;font-size:0; line-height:0;background:url(btn.jpg) no-repeat 0 0;}

方法二:在该标签前面添加任何内容

最简单的就是添加一个空格的转义符:&ensp;

HTML:

&ensp;<a href="#" class="btn">立即下载</a>

CSS:

.btn{width:85px; height:25px;display:inline-block;text-indent:-999em;background:url(btn.jpg) no-repeat 0 0;}

发表评论

电子邮件地址不会被公开。

随机