文本缩进：-9999px是用图像替换文本的不好方法，还有哪些替代方法？

一尘不染

文本缩进：-9999px是用图像替换文本的不好方法，还有哪些替代方法？

css

说我们应该避免使用这种技术。这个说很棒。Google是否会在CSS文件中查找text-indent: -9999px;并惩罚您？：|

我使用的财产很多隐藏的文本。例如，我有一个由图标表示的按钮：

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

CSS：

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

我看不到任何替代代码的方法。如果将其替换为图像，则每个按钮图像都会自动获得+20 HTTP请求。

如果我将链接设置为空，则可访问性会降低，因为屏幕阅读器不会知道它是什么。空链接看起来很奇怪，可能Google也不喜欢它。

那么处理这种情况的最佳方法是什么？

阅读 229

2020-05-16

共1个答案

一尘不染

不使用-9999px方法的一个很好的理由是，浏览器必须为其应用的每个元素绘制一个9999px的框。显然，这可能会对性能造成很大的影响，尤其是在将其应用于多个元素时。

替代方法包括此方法：

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

…或者（从此处开始）：

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

（其中“ padding-top”是您希望元素的高度）。

我认为第一种方法更整洁，因为它可以让您以常规方式设置高度，但是我发现第二种方法在IE7中效果更好

2020-05-16