0

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

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

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

然而，

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

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

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

4

2 回答 2

0

为什么不像h5bp那样做呢？

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

供您参考，您还可以在此处获得许多图像替换技术。

于 2013-04-25T08:01:37.923 回答
0

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

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;
}
于 2013-04-25T08:19:55.313 回答