html - 使用文本缩进-语义好吗??

标签 html css seo 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。

谢谢。

泰纳利。

最佳答案

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

替代方法包括这个 Link

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

.. 或者(来自 Link

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

(其中“padding-top”是您希望元素达到的高度)。

我认为第一种方法更简洁,因为它允许您以正常方式设置高度,但我发现第二种方法在 IE7 中效果更好。

关于html - 使用文本缩进-语义好吗??,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27563059/

相关文章:

javascript - Bootstrap Navbar-Collapse 不起作用

ruby-on-rails - Ruby on Rails - link_to - 使用 "-"(连字符)而不是 "_"(下划线)生成 Urls

javascript - 向上和向下箭头 JavaScript

css - 无法点击 safari 中悬停在视频上方的链接

html - 又一个 HTML/CSS 布局挑战——带有粘性页脚的全高侧边栏

css - 如何旋转容器中的背景图片?

url - 为什么 URL 路径中的 ID 对 SEO 来说是个坏主意?

xhtml - 订购您的标题标签

javascript - 附加的 h1 标签无法识别

html - 使用VBA从网站中抓取innerHTML