图代文时隐藏文字的兼容实现

早年~


 

楔子

在xx项目中,为各网点图标隐藏文字时,用了{text-indent:-9999em;}的方式,结果IE6/7下图片就不见了,如下:

正常浏览器:

IE6/7:

平时对于这种情况下的文字隐藏,多用line-height(下文提到的方式三)的方式,并没有认真去考虑它的优劣,也没有进行其他方式的测试和比较,所以一用text-indent,就出现了上述问题。于是,趁着这个契机,对常用的文字隐藏方式进行了简单的测试总结。

简单说明

对于图代文的情况,我大致分为两种,一种是图片较大、背景不透明、图片加载不到时需要显示文字的,一种是图片较小或背景透明,图片加载不到时不显示文字也影响不大的。对于前一种,我一般用图片绝对定位的方式将文字盖在下面,并尽可能设置文字的样式与图片中的一致。

上图禁用图片后的效果:

这种争议比较小,也不是这次讨论的重点,这次想要测试的是后一种情况,ok,废话少说,开工。

测试

对于图片较小或背景透明,图片加载不到时不显示文字也影响不大的情况,或者说,文字不能被盖到图片下的情况,常用隐藏文字的方式有如下三种:

  • font-size方式
  • text-indent方式
  • line-height方式

下面逐一进行测试:

方式一(font-size方式)

Step 1

代码:

展现:

FF、Webkit、Opera、IE8/9:

IE6/7:

说明:

设置了 {font-size:0;} 之后,IE6/7下文字没有消失,而是以1像素点的形式存在。

Step 2

代码:

展现:

All of FF、Opera、Webkit、IE6-9:

说明:

设置 {line-height:0;},即可消除IE6/7下的像素点。

方式二(text-indent方式)

Step 1

代码:

展现:

FF、Webkit、Opera、IE8/9:

IE6/7:

整个<div>的内容被隐到屏幕外了,页面上一片空白。

Step 2

代码:

展现:

All of FF、Opera、Webkit、IE6-9:

说明:

元素为块级布局时,可修复此问题。此处将实现方式由原来的inline-block更改为float。

方式三(line-height方式)

代码:

展现:

All of FF、Opera、Webkit、IE6-9:

说明:

还是这种方式比较好,基本不存在兼容问题。

总结

三种方式相对而言,个人嚼着一、三比较好,方式二依赖于布局,如果后续有人改了布局,对这个问题又不熟悉的话,可能会造成bug。

以上,仅为抛砖引玉,期待更好的方式……

2012.12.5

posted @ 2014-06-25 09:54  lilac(雪青)  阅读(...)  评论(...编辑  收藏