如何隐藏锚文本而不隐藏锚？答案

【问题标题】：How do I hide anchor text without hiding the anchor?如何隐藏锚文本而不隐藏锚？
【发布时间】：2011-03-14 15:27:58
【问题描述】：

假设我有以下标记：

<li><a href="somehwere">Link text</a></li>

如果我在 a 标签上有背景图片，我将如何仅使用 css 隐藏链接文本？ font-size:0 似乎在 a 标签上工作正常，除了在 ie7 little blobs show 中。

到目前为止，感谢您的帮助，我使用了 line-height: 0; 和 font-size: 0; 和 text-indent: -999px。但它仍然在 safari 中显示一些斑点，有什么想法吗？

【问题讨论】：

标签： css

【解决方案1】：

试试

 a{
    line-height: 0; 
    font-size: 0;
    color: transparent; 
 }

color: transparent; 涵盖了 Webkit 浏览器仍显示 1px 文本的问题。

【讨论】：

我发现这在 Chrome 15.0.874.120 中不起作用。还得加color:transparent;
@brokenindexfinger 很奇怪...但是添加 color:transparent 可以吗？如果是这样，请随时编辑我的答案并添加，或者我可以。
嗨 Loktar，这是我尝试在我的博客中实施的信息，终于得到了它。非常感谢您的帮助。
感谢您提供此信息。此信息有助于在我正在处理的项目中设置可访问性
该死的好解决方案。文本缩进可能很挑剔，尤其是在处理相互包裹的多个元素以及在这些元素上设置多个定位时。很好的答案。

【解决方案2】：

将文本包装在一个 span 中并设置 visibility:hidden; Visibility hidden 将隐藏该元素，但它仍会占用页面上的相同空间（相反 display: none 也会将其从页面中删除）。

【讨论】：

感谢 scrappedcola，这是一个很好的解决方案！
这是正确的解决方案，但我使用 display: none 来删除所有尺寸。

【解决方案3】：

a { text-indent:-9999px; }

从我的经验来看，效果很好。

【讨论】：

啊，太好了，我什至没有想到，我一直用它来处理带有图像的标题。
你可能会收到谷歌的性能打击，因为你告诉浏览器在 9999 像素的宽度上绘制一个框，对于它应用的每个元素。就个人而言，您最好应用 display:none、visibility:hidden、font-size:0 或其他类似的效果，以避免 Google 不尊重您过度扩展的布局方案的“可能性”。我以前也用这种方式编码，但我停止了。来源 - stackoverflow.com/questions/8971152/…
这也破坏了 Firefox 上的 outline。轮廓矩形将从浏览器视口的左侧开始。

【解决方案4】：

小提示：

我有以下场景：

<a href="/page/">My link text
:after
</a>

我用 font-size: 0 隐藏了文本，所以我可以使用 FontAwesome 图标。这适用于 Chrome 36、Firefox 31 和 IE9+。

我不推荐 color: transparent 因为文本仍然存在并且是可选择的。使用 line-height: 0px 不允许我使用 :after。也许是因为我的元素是一个内联块。

可见性：隐藏：不允许我使用 :after。

text-indent: -9999px;：也移动了 :after 元素

【讨论】：

是的，我也遇到了伪元素问题，这解决了它。谢谢！

【解决方案5】：

text-indent :-9999px

完美运行。

【讨论】：

【解决方案6】：

另一个选项是基于引导程序“sr-only”类隐藏。如果您使用“sr-only”类将文本包装在跨度中，则不会显示文本，但屏幕阅读器仍然可以访问它。所以你会：

<li><a href="somehwere"><span class="sr-only">Link text</span></a></li>

如果不使用bootstrap，还是保持上面的，还要加上下面的css来定义“sr-only”类：

.sr-only {position: absolute;  width: 1px;  height: 1px;  padding: 0;  margin: -1px;  overflow: hidden;  clip: rect(0 0 0 0);  border: 0; }

【讨论】：

【解决方案7】：

只需将font-size: 0; 添加到包含文本的元素中。这很好用。

【讨论】：

【解决方案8】：

我遵循了 Loktar 的最佳答案，效果很好。我遇到的唯一问题是 Chrome（我当前的版本是 27.0.1453.94 m）。我遇到的问题是 Chrome 似乎知道链接中的文本不可见，并且它使链接比它应该的低一点（类似于 margin-top，但不可能改变它）。这发生在我们使文本不可见的所有方式中： - 行高：0； - 字体大小：0； - 文本缩进：-9999px;

我可以通过调整链接的垂直对齐来解决这个问题，如下所示：

vertical-align: 25px;

希望对你有帮助

【讨论】：

【解决方案9】：

您可以将图像放入::before伪元素并设置与图像相同的尺寸+添加溢出：隐藏，例如：

li a::before{
  content:url('img');
  width:20px;
  height:10px
}

a {
  overflow:hidden;
  width:20px;
  height:10px
}

【讨论】：

【解决方案10】：

使用此代码：

<div class="hidden"><li><a href="somehwere">Link text</a></li></div>

【讨论】：

这看起来与之前提供的解决方案 - stackoverflow.com/a/5300929/1974224 非常相似，唯一的区别是之前的答案建议使用 span 将锚包装到其中。

【解决方案11】：

我可以通过设置 font-size: 0 来解决这个问题。

【讨论】：

【解决方案12】：

display: none;怎么样

这隐藏了任何东西。

【讨论】：