页面里使用 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

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

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

标签: CSS

已有 22 条评论

  1. 蘑菇街网站 蘑菇街网站

    用背景图片效果更好吧

  2. 真功夫 真功夫

    收藏起来,以后遇到了,可以拿来用

  3. 利用 CSS 跨浏览器地隐藏文字一法。 | w3er
  4. 利用 CSS 跨浏览器地隐藏文字一法。 | w3er
  5. ETON ETON

    網路就像一顆一顆小小的螺絲釘,才能顯現這份偉大! 新年快樂,站長加油!

  6. Godspeed Godspeed

    刚才仔细弄了一下input下的submit背景图片按钮隐藏文字效果的css设置问题。。

    发现以下问题:

    如果按照博主的设置,ie6下按钮会不见,必须添加一个:display:block;设置,才可以正常。。

    而且我反复的设置后发现:

    display:block; line-height:0px; text-indent:-9999px; overflow:hidden;

    可以完美的实现在Firefox和IE6下的正确兼容,实现效果,至于font-size:0px;也可以不设置,小虚线也不见了。。

  7. frogsky frogsky

    个人觉得text-indent和overflow组合是最佳解决方法,针对这种小问题没必要去做那么复杂的各个浏览器兼容方式!而虚线问题其实可以忽略,除非你整个页面都是这种,但从用户体验上也就说不过去了!还是见仁见智!

    1. Chao QU Chao QU

      @frogsky
      负indent 法确实是很好的方法,
      我也最常使用;
      我这里也是为大家提供另一种思路。
      :)

  8. catge catge

    今天刚好做到这个inline-block的按钮在ie下没法用text-indent的方法。就用你这个试了下发现了两个问题:
    1、chrome下会给元素带下一些margin-top
    2、color:transparent对于一个a来说。要覆盖这个声明一般比较困难,需要提高不少优先级

    最后还是决定改成display:block + text-indent实现吧:)

    1. Chao QU Chao QU

      @catge

      margin-top 是由本声明引起的?的确有这个问题!
  9. baisohu.net baisohu.net

    为什么使用 inline-block 元素就要隐藏其文字?没试过用line-height来隐藏,我都是用text-indent:-9999px;overflow:hidden;

    1. Chao QU Chao QU

      @baisohu
      并不是一定要隐藏,
      而是时常会利用它配合 Srpite 来实现行内小图标,
      有时候从语义的角度来说确实还不如 IMG 。

  10. Rock Rock

    我一般使用text-indent:-9999px;overflow:hidden;

  11. Dpan Dpan

    问透明背景或颜色值能同理么,IE6支持就可以了

    1. Chao QU Chao QU

      @Dpan
      透明文字是针对 webkit 的 hack,
      如果你前景和背景色一致,
      视觉上确实是隐藏了 ,
      但是文字也是可以被选中的。
      当然如果你有这个需求则另当别论。

  12. vapour vapour

    IE中的inline-block元素应用text-indent隐藏有bug

  13. 网站优化 网站优化

    好东西 借鉴了

  14. timberland boot timberland boot

    如何隐藏?不会!!!

  15. s5s5 s5s5

    有时感觉是不是简单的问题给复杂化了? display:none;

  16. 明城 明城

    还是习惯使用 text-indent: -10em; 这样

    话说 CSS 的渲染效率问题还有待说明,目前觉得影响不大

    1. Chao QU Chao QU

      @明城
      恭喜你抢到沙发,
      负 indent 在链接上会有虚线问题。

      P.S. 我自己倒认为
      “透明”的效率也不会高

      1. evan evan

        @空空哥
        indent 之后 overflow:hidden 就没虚线了
        行高或者左右移动的值别射得太离谱应该还好吧
        透明之后能被鼠标选中么?

添加新评论