本文 http://luigimontanez.com/2010/stop-using-text-indent-css-trick/说我们应该避免使用这种技术。This one http://aext.net/2010/02/css-text-indent-style-your-html-form/说这太棒了。 Google 是否真的会在 CSS 文件中查找text-indent: -9999px;并惩罚你？ :|
我正在使用该属性a lot隐藏文本。例如，我有一个由图标表示的按钮：
<a href="#" class="mybutton">do Stuff</a>
The CSS:
.mybutton{
text-indent: -9999px;
background: transparent url(images/SpriteWithButtons.png) no-repeat 20px 20px;
display: block;
width: 16px;
height: 16px;
}
我没有看到我的代码有任何替代方案。如果我用图像替换它，我会自动为每个按钮图像获得 +20 个 HTTP 请求。
如果我将链接设为空，则它的可访问性会降低，因为屏幕阅读器不会知道那是什么。空链接看起来很奇怪，可能谷歌也不喜欢这样......
那么处理这种情况的最佳方法是什么？
不使用 -9999px 方法的一个很好的理由是浏览器必须为应用该方法的每个元素绘制一个 9999px 框。显然，这可能会对性能造成相当大的影响，特别是当您将其应用于多个元素时。
替代方法包括这个（来自泽尔德曼网站 http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/):
text-indent: 100%; white-space: nowrap; overflow: hidden;
...或者（从here http://bustoutsolutions.com/blog/2009/10/08/better-alternative-to-text-indent-9999px):
height: 0; overflow: hidden; padding-top: 20px;
（其中“padding-top”是您希望元素的高度）。
我认为第一种方法更简洁，因为它可以让你以正常方式设置高度，但我发现第二种方法在 IE7 中工作得更好
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
