Question

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

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

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

然而，

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

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

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

Answer 1

为什么不按照h5bp的方式去做呢？

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

供您参考，您还有许多图像替换技术here。

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

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

2 个答案: