Html 在CSS中，为什么文本缩进有巨大的负值

当我有一个像

锚定

这样的元素作为徽标时，我将使用负数文本缩进值，这是一个巨大的值

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

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

但是,

我不喜欢巨大的负值

在一些浏览器和平板电脑上，我在打开和关闭手风琴的场景中看到了一个大的滚动条

我听说，当浏览器在DOM元素上遇到任何度量值时，根据框模型，它会绘制一个至少有那个大值的框。这可能是绘画时的性能问题

我也见过有人使用透明技术、最小字体大小、字体颜色与徽标背景匹配等，但在我看来他们并不优雅

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

为什么不这样做呢

---

作为参考，您还有许多图像替换技术。

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

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;
}

---

为什么不使用图像并放置

alt

标记，而不是缩进文本并使用bg。。。搜索引擎确实会在图像中的

alt

标签上搜索图像替换技术。我打算将我的

a

更改为

h3 a

，并为

h3

提供背景信息。如果是徽标/品牌，我会将其放在

h1

中。我无法证实这一点，但我想我在某个地方读到谷歌推荐的。快速的谷歌搜索会给你类似的文章。

.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;
}