Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
255 views
in Technique[技术] by (71.8m points)

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

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 punishes you? :|

I'm using that property a lot to hide text. For example, I have a button that is represented by an icon:

<a href="#" class="mybutton">do Stuff</a>

The CSS:

.mybutton{
  text-indent: -9999px;
  background: transparent url(images/SpriteWithButtons.png) no-repeat 20px 20px;
  display: block;
  width: 16px;
  height: 16px;
}

I don't see any alternative to my code. If I replace that with an image I automatically get +20 HTTP requests for each button image.

If I make the link empty, it is less accessibile because screen readers won't know what that is. And empty links look weird, probably Google doesn't like that either...

So what's the best way to handle such situations?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...