在 CSS 中，为什么文本缩进有巨大的负值 [重复]答案

【问题标题】：In CSS, why to have huge negative value for text-indent [duplicate]在 CSS 中，为什么文本缩进有巨大的负值 [重复]
【发布时间】：2013-04-25 07:59:26
【问题描述】：

当我有一个像anchor 这样的元素用作徽标时，我将使用巨大的负文本缩进值

a.logo {
  background: url(logo.gif) no-repeat;
  text-indent: -9999px;
}

这样徽标看起来像图像，加上文字不可见。
另外，我需要 DOM 中的文本，以便搜索引擎可以找到它。

然而，

我不喜欢巨大的负值
在某些浏览器和平板电脑上，我在打开-关闭手风琴的场景中看到了很大的滚动条
我听说浏览器在 DOM 元素上遇到任何测量值时，根据盒子模型，它会绘制一个至少具有那么大值的盒子。这可能是绘画时的性能问题

我还看到人们使用透明技术、最小字体大小、字体颜色与徽标背景匹配等。但在我看来它们并不优雅

是否没有语义或优雅的技术来向用户隐藏显示的文本，即使在 HTML5 和 CSS3 之后，它仍然存在于 DOM 中？

【问题讨论】：

你为什么不使用图片并放置alt标签而不是缩进文本并使用bg...搜索引擎确实会在图片中找到alt标签

标签： html css

【解决方案1】：

为什么不像h5bp那样做呢？

.ir {
    border: 0;
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
    background: url(test.png);
    width: 300px;
    height: 75px;
}

你也有很多图片替换技巧here，供你参考。

【讨论】：

感谢图像替换技术。我要将我的a 更改为h3 a 并拥有h3 的背景
如果是用于徽标/品牌，我会将其放入h1。我无法验证这一点，但我想我在某个地方读到了 Google 推荐的内容。快速谷歌搜索会给你像this one这样的文章。

【解决方案2】：

你不需要使用文本缩进（如果你不想）试试这个。

css代码

.logo{
    width:65px;
    height:0;
    background:url(logo.png) 0 0 no-repeat;
    font-size:0;
    line-height:0;
    padding-top:15px;
    overflow:hidden;
    display:block;
}

【讨论】：