Question

说我有以下标记：

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

如果我在a标签上有背景图像，我将如何使用css隐藏链接文本？ font-size：0似乎在一个标签上工作正常，除了ie7小blob显示。

由于

感谢您的帮助到目前为止iv使用了line-height：0;和font-size：0;和text-indent：-999px;但它仍然会在野生动物园中出现一些斑点，任何想法？

Answer 1

尝试

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

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

Answer 2

将文本换行并设置visibility:hidden;隐藏可见性将隐藏元素，但它仍将占用页面上的相同空间（相反显示：none也会从页面中删除它）。

Answer 3

a { text-indent:-9999px; }

从我的经历中倾向于运作良好。

Answer 4

迷你提示：

我有以下情况：

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

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

我不建议使用color：transparent，因为文本stil存在且可以选择。使用line-height：0px不允许我使用：after。也许是因为我的元素是一个内联块。

可见性：隐藏：不允许我使用：之后。

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

Answer 5

text-indent :-9999px

完美无瑕地工作。

Answer 6

我遵循了Loktar的最佳答案，而且效果非常好。我遇到的唯一问题是Chrome（我目前的版本是27.0.1453.94米）。我遇到的问题是Chrome似乎意识到链接中的文本是不可见的，它会使链接稍微低一点（就像margin-top一样，但不可能改变它））。这种情况发生在我们使文本不可见的所有方式中： - 行高：0; - font-size：0; - text-indent：-9999px;

我能够通过调整链接的垂直对齐来解决这个问题：

vertical-align: 25px;

我希望这很有用

Answer 7

另一个选择是隐藏基于bootstraps＆＃34; sr-only＆＃34;类。如果您将文本包含在类＆＃34; sr-only＆＃34;的范围内然后文本将不会显示，但屏幕阅读器仍然可以访问它。所以你会：

$(document).ajaxSuccess( function() {
   $('option:contains("United States"):not(:contains("Minor"))').prop("selected", true);
});

如果你没有使用bootstrap，仍然保留上面的内容，还要添加下面的css来定义＆＃34; sr-only＆＃34;类：

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

Answer 8

只需将font-size: 0;添加到包含文字的元素即可。这很有效。

Answer 9

您可以将图像放入:: e伪元素之前，并为图像设置相同的尺寸+添加overflow：hidden，例如：

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

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

Answer 10

使用此代码：

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

Answer 11

我可以通过设置 font-size：0 来解决此问题。

Answer 12

display: none;

怎么样？

隐藏任何东西。

如何在不隐藏锚点的情况下隐藏锚文本

12 个答案: