Question

这是一个非常直截了当的问题：

简介：我在许多利用大量图片的网站上看到使用属性文本缩进来隐藏图像上的文本，文本通常使用文本缩进隐藏。所以我想在图像上可见的文本是供最终用户查看的，并且使用text-indent隐藏的文本是用于serch引擎爬行的：

这是我所说的一个例子：

.main{
      text-align: center;

    }
    .main img{
      margin-top: 100px;
      height: 40%;
      width: 40%;
    }
    .main div{      
      top: 0;
      left: 0;
      text-indent: -9999px;
    }

HTML code：

<div class="main">
      <img src="http://www.grammar.net/wp-content/uploads/2012/02/12-love-idioms_big-01.png" alt="temp image">
      <div><p>Phoenix Kids Daycare Bangalore, follows a play based system integrated with a curriculum conforming to the global best teaching practices. Our focus is on interactive learning-center and sessions where children apply what they learn and learn what they apply. They then begin to take ownership for their learning and become lifelong learners.</p></div>
 </div>

现在这是一种过时的做法吗？这仍然有效吗？实际上它被认为是语义？

jsfiddle

虽然它是一个相对简单的问题，但我要求它的重要性，因为我希望我的方面有语义HTML。

谢谢。

泰纳利。

Answer 1

不使用-9999px方法的一个很好的理由是浏览器必须为每个应用它的元素绘制一个9999px的框。显然，这可能会造成相当大的性能损失，特别是如果您将其应用于多个元素。

替代方法包括这一个Link

text-indent: 100%; white-space: nowrap; overflow: hidden;

..或者（来自Link

height: 0; overflow: hidden; padding-top: 20px;

（其中＆＃39; padding-top＆＃39;是你想要元素的高度）。

我认为第一种方法比较简洁，因为它可以让你以正常的方式设置高度，但我发现第二种方法在IE7中效果更好。

Answer 2

从您的示例中，这种方法可能会增加SEO（搜索引擎优化）。正如您所说，搜索引擎无法以该格式读取图像，但您的信息存储在div中，因此从搜索引擎爬虫的角度来看，信息不是图像数据。

当人们想到这种方法时，他们通常是为了增加搜索引擎结果。但是，为图像提供替代内容也是屏幕阅读器中断图像的好方法。使用你的例子，没有div解释图像的内容，盲人或视力不佳的人将无法理解图像的内容。

Answer 3

当您提供用户无法阅读的搜索引擎内容时，可以将其视为隐藏真实内容。

https://support.google.com/webmasters/answer/66355?hl=en

您可以使用alt-tag进一步描述图片。如果它是一个信息图表或我不建议您使用您描述的方法来解释搜索引擎的信息图。

https://support.google.com/webmasters/answer/114016?hl=en（图片发布指南Google）

使用文本缩进 - 是不是很好的语义？

3 个答案: