Is text-indent: -9999px a bad technique for replacing text with images, and what are the alternatives?

前端 未结 5 2110
庸人自扰
庸人自扰 2020-11-30 02:19

This article say we should avoid using this technique. This one says it\'s awesome. Is it true that Google looks inside CSS files for text-indent: -9999px; and

5条回答
  •  隐瞒了意图╮
    2020-11-30 03:13

    A good reason not to use the -9999px method is that the browser has to draw a 9999px box for each element that this is applied to. Obviously, that potentially creates quite a performance hit, especially if you're applying it to multiple elements.

    Alternative methods include this one (from zeldman.com):

    text-indent: 100%; white-space: nowrap; overflow: hidden;
    

    ...or alternatively (from here):

    height: 0; overflow: hidden; padding-top: 20px;
    

    (where 'padding-top' is the height you want the element to be).

    I think the first method is neater, since it lets you set height in the normal way, but I've found the second one to work better in IE7

提交回复
热议问题