利用 CSS 跨浏览器地隐藏文字一法。

沙滩凉鞋 发布于2010-08-13 16:08 | 153次阅读 | 字体: 打印预览


页面里使用 inline-block 元素时经常需要隐藏其文字,
比较流行的方法是将 line-height 的值设置得很大,
然后配合 overflow: hidden 来隐藏文字。
请容许我主观臆断地认为过大的行高会影响渲染效率,
而行高不够又可能在用户对页面进行放大操作时露出“马脚”(即未能被隐藏的部分)。
是否当 line-height:0 时对 Webkit 内核就没有办法了?
我想到利用透明文字来解决这一兼容问题,
并最终整理如下:

font-size:0; /* for firefox & opera */
color: transparent; /* for webkit */
line-height:0;
overflow:hidden; /* for IE */

自测后兼容的浏览器如下:

IE 6-8
Firefox 1-4
Opera 9-10
Safari 3-5
Chrome 1-6

如遇不兼容的情况可以留言。

当然隐藏文字的方法还有很多。
有人说“直接不填文字不就好啦”,
呃……
算我没说,
不过目前公司的产品对盲人阅读器的兼容还是有要求的。


本文出处 : http://www.quchao.com/entry/a-cross-platform-css-based-way-to-hide-text/ end

上一篇:使用 XBL 为 Firefox 简单实现 FlashBlock

下一篇:马来西亚完全随意自由行