-1

这是一个非常简单的问题：

简介：我在很多网站上看到使用大量图像使用属性 text indent 来隐藏图像上的文本，通常使用 text-indent 隐藏文本。所以我猜图像上可见的文本是供最终用户查看的，而使用 text-indent 隐藏的相同文本是供搜索引擎抓取的：

这是我所说的一个例子：

.main{
      text-align: center;

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

HTML 代码：

<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。

谢谢你。

特纳利。

4

3 回答 3

1

不使用 -9999px 方法的一个很好的理由是浏览器必须为每个应用此方法的元素绘制一个 9999px 的框。显然，这可能会对性能造成很大影响，尤其是当您将其应用于多个元素时。

替代方法包括这个链接

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

..或者（来自链接

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

（其中 'padding-top' 是您希望元素达到的高度）。

我认为第一种方法更简洁，因为它可以让您以正常方式设置高度，但我发现第二种方法在 IE7 中工作得更好。

于 2014-12-19T14:41:55.497 回答
0

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

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

于 2014-12-19T10:08:08.107 回答
0

当您向搜索引擎提供用户无法阅读的内容时，这可以被视为伪装。

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

于 2014-12-19T11:15:11.313 回答