Question

我最近一直在阅读有关文字缩进的内容：-999em可能被搜索引擎机器人误认为是垃圾邮件技术。

我们的一位前端设计师经常使用这种技术为使用背景图像精灵的区域添加链接。

采取以下html / css：

//html
<div id="masthead">
  <a href="/path/to/page">View this in more detail</a> 
</div>

//css
#masthead {
   background:transparent url(/path/to/image.png) top left no-repeat;
   position:relative;
}

#masthead a {
   display:block;
   width:100%
   height:100%;
   text-indent:-999em;
}

然后具有可点击的背景图像的效果。

还有更好的选择吗？

如果没有使用透明gif和alt文本的文本缩进技巧，我可以实现同样的目标，但是有点感觉很古怪。

<a href="/path/to/page"><img src="transparent.gif" alt="View this in more detail" /></a>

只是想知道对此有何普遍共识。

Answer 1

您可以将此作为文本缩进替代方法并使用较少的标记：

<强> CSS

a{
    background: url("http://www.google.co.in/intl/en_com/images/srpr/logo1w.png") no-repeat;
    display:block;
    width:100px;
    height:100px;
    font-size:0;
}

选中此示例：http://jsfiddle.net/sandeep/epq2F/

text-indent的替代方法：-999em用于创建具有后台css的可访问链接

1 个答案: