用于隐藏链接文本的文本缩进

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

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

来源

2013-04-22 John

你不说究竟他.hide的内容如何，但如果想法是使用显示：无，算了吧。屏幕阅读器和搜索蜘蛛会忽略带display-none的元素，因为隐藏内容被认为是无关紧要的（尤其是黑帽SEO用户可以用关键字轻松填充隐藏文本）。

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

来源

2013-04-22 22:13:37

@Jimmy ...是的，显示：无; Thanx，我知道这很容易做到。我明白text-indent是目前的方式，它似乎应该有一个更好的方法。 – John 2013-04-22 22:28:04

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"); 
}

DEMO

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

说明

<h1>你可以改变你喜欢的东西。我prefere <h1>，因为是好的SEO

来源

2013-04-22 23:03:20

用于隐藏链接文本的文本缩进

回答

相关问题