很多时候,我们会将一些按钮做成图标或者其他背景图片形式,出于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;}

# #

分享此文: 微信 新浪微博 QQ
上一篇

WordPress 教程:获取日志中的第一个图片地址

下一篇

IE6/IE7 下 inline-block 的兼容性处理

发表评论