文本缩进隐藏链接文本答案

【问题标题】：Text-Indent to hide link text文本缩进隐藏链接文本
【发布时间】：2013-04-15 23:12:15
【问题描述】：

我一直在寻找一种方法来替换文本缩进：-9999px css-trick 用于隐藏链接文本并将图像显示为链接，例如主页徽标按钮。我找到了一个似乎可行的简单解决方案，但似乎没有得到任何炒作，所以我想知道是否有我看不到的漏洞。下面是解决方案，其中 class="homeButton" 应用了 CSS 翻转图像，而 class="hide" 显然隐藏了链接文本。请让我知道这是否有任何缺点，我不认为这是一种仍然具有基于文本的链接的方法，其中文本不会正常显示在屏幕上，但仍会显示在屏幕阅读器和搜索引擎中。一如既往地感谢...

<a class="homeButton" href="index.html"><span class="hide">Home Button</span></a>

【问题讨论】：

标签： css seo

【解决方案1】：

使用字体大小 = 0

.hide {
 font-size: 0;
}

【讨论】：

【解决方案2】：

HTML 代码

<h1><a class="homeButton" href="index.html">Home Button</a></h1>

CSS 代码

h1 {
    display: block;
    width: 386px;
    height: 83px;
    margin: 11px 0 0 10px;
    text-align: left;
    overflow-x: hidden;
}

h1 a.homeButton {
    display: block;
    width: 386px;
    height: 83px;
    text-indent: -19999px;
    background-repeat: no-repeat;
    background-image: url("http://existstudio.pl/images//template/ex-ist/ex-ist-logotype.png");
}

演示

http://jsfiddle.net/bartekbielawa/rmWhF/

解释

<h1> 你可以改变你喜欢的东西。我更喜欢<h1>，因为它有利于 SEO

【讨论】：

【解决方案3】：

您没有确切地说出 .hide 的内容如何，但如果您的想法是使用 display:none，那就算了。屏幕阅读器和搜索蜘蛛都会忽略具有 display-none 的元素，因为隐藏的内容被认为是无关紧要的（尤其是黑帽 SEO 人员可以很容易地用关键字填充隐藏的文本）。 p>

我真的不明白文本缩进解决方案有什么问题。当然，我会减少缩进值以阻止 IE6 为巨大的未使用画布保留内存，但它仍然是这些工作的推荐技术。

【讨论】：

@Jimmy... 是的，显示：无；谢谢，我知道这太容易了。我知道 text-indent 是目前的方式，似乎应该有更好的方式。