Question

我一直在寻找替换文本缩进的方法：-9999px css-trick用于隐藏链接文本和显示图像作为主页Logo按钮的链接。我找到了一个似乎有效的简单解决方案，但似乎没有得到任何炒作，所以我想知道是否有我看不到的漏洞。下面是解决方案，class =“homeButton”应用css翻转图像，class =“hide”显然隐藏链接文本。如果这有任何缺点，请让我知道我没有看到作为一种方式仍然有一个文本链接文本没有正常显示在屏幕上，但仍然出现在屏幕阅读器和搜索引擎。 Thanx一如既往......

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

Answer 1

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

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

Answer 2

HTML CODE

<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有好处

Answer 3

使用font-size = 0

.hide {
 font-size: 0;
}

文本缩进以隐藏链接文本

3 个答案: