这篇文章说我们应该避免使用这种技术.这个说它很棒.谷歌在CSS文件中寻找text-indent: -9999px;并惩罚你是真的吗？:|
我使用的财产很多隐藏的文本.例如,我有一个由图标表示的按钮:
<a href="#" class="mybutton">do Stuff</a>
CSS:
.mybutton{
text-indent: -9999px;
background: transparent url(images/SpriteWithButtons.png) no-repeat 20px 20px;
display: block;
width: 16px;
height: 16px;
}
我没有看到任何替代我的代码.如果我用图像替换它,我会自动为每个按钮图像获得+20 HTTP请求.
如果我将链接设置为空,则它的访问次数较少,因为屏幕阅读器不会知道它是什么.空链接看起来很奇怪,可能Google也不喜欢这样......
那么处理这种情况的最佳方法是什么？
我已经停止为页面的徽标插入"img"标签.因为它不是作为内容一部分的图像,它是一个设计元素,但它仍然是我想要控制的信息.所以我只是在一个"a"元素中将标题写为display:block,overflow:hidden,然后用一些填充推出文本.我认为这是SEO的一个很好的解决方案,因为你可以控制徽标在页面上的重要性.
但现在我的困境开始了.页面的标识有多重要？
"列表分开"将徽标放在h1元素中.但徽标真的那么重要吗？在文章页面上你有两个H1元素(徽标和文章的标题)大多数网站只使用img balbal/a,但我不喜欢这个解决方案.因为我只想使用img作为内容的一部分的图像......
它有点哲学问题,我希望你能给我一些意见或一些文章来阅读...
在展示公司徽标时,我今天看到了新的东西.
它们设置高度和宽度并溢出:隐藏在h1标签上,并在h1标签内的标签上设置负边距,以防止文本显示.
代码看起来像这样
<h1 class='logo'><a href='/'>Company Name</a></h1>
css看起来像这样:
.logo {
text-indent: -9999em;
overflow: hidden;
text-align: left;
background-image: url(/images/logo.png);
background-repeat: no-repeat;
background-position: 0% 0%;
width: 253px;
height: 80px;
float: left;
margin-left: 10px;
}
.logo a {
display: block;
width: 253px;
height: 80px;
}
我总是更喜欢在a标签内部使用span并将其设置为display:none的方法.
我的代码看起来像这样:
<h1 class='logo'><a href='/'><span>Company Name</span></a></h1>
我的CSS看起来像这样:
.logo {
background: url(/images/logo.png) top left no-repeat;
margin-left: 10px;
a {
display: block;
width: 253px;
height: 80px;
span {
display:none;
}
}
}
忽略我的嵌套CSS看起来更干净的事实,我是否正在用我的额外跨度和显示做正确的事:无或者是否有理由将疯狂的文本缩进和其他额外的东西放在前一个程序员投入样式表中？
为清晰起见编辑:我不是要求以不同的方式显示公司徽标.使用带有公司名称的h1是一种公认的标准做法.我想我想问你用h1和css显示公司徽标的方式是什么？为什么？