css - 为什么这种技术通常使用负文本缩进？

Question

假设您想用图像替换锚点，并将该图像作为锚点的背景。出于可访问性的原因，您仍然希望由锚点包裹的文本存在，但您不希望它可见。一个众所周知的技术是使用类似 text-indent: -9999px; 连同溢出：隐藏；

假设我们的锚框是 50px x 50px，我们为什么不直接做 text-indent: 50px 呢？这会将文本推入锚的隐藏溢出中，无论它得到多长时间！

Answer 1

好吧，让我们看看当你这样做时会发生什么

http://jsfiddle.net/C29Ma/

<div class="image">Hide me please</div>

div.image {
    width: 50px;
    height: 50px;
    background: url(http://placehold.it/50x50) no-repeat;
    text-indent: 50px;
}

因为文本的宽度超过 50 像素，所以它会环绕。只有第一行缩进 50px。

在广泛支持伪元素或控制自动换行之前，负缩进技术就出现了。它做得足够好，所以当出现更新/更好的方法时，人们不会改变他们做事的方式。

不过，您的建议非常接近现代技术之一

http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

.hide-text {
     text-indent: 100%;
     white-space: nowrap;
     overflow: hidden;
 }