1

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

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

3 回答 3

1

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

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

于 2013-04-22T22:13:37.550 回答
1

代码

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

于 2013-04-22T23:03:20.790 回答
0

使用字体大小 = 0

.hide {
 font-size: 0;
}
于 2020-01-23T09:07:59.770 回答