如何在图像不存在时使用CSS隐藏替代文字？

Question

是否可以在所有浏览器中使用CSS隐藏alt文本,

我试过color:transparent,它适用于IE以外的所有浏览器.

是否可以使用CSS在IE中执行此操作？在此先感谢您的帮助.

Answer 1

您可以使用 text-indent:-9999px

HTML

<img src="images/test.jpg" alt="alternative">

CSS

img{
  text-indent:-9999px
}

文字缩进不起作用,在IE9中看到你的小提琴 (3认同)
使用`text-indent:-9999px`将使浏览器绘制不必要的9999空白空间.使用[kellum方法](http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/) (3认同)

Answer 2

怎么用font-size: 0？它适用于alt在图像加载之前或图像srcURL 不可用时隐藏文本。

Answer 3

kellum方法：

.hide-text {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

Answer 4

而不是使用color:transparent;使用display:none;.

但你不应该使用这种技术。

正如@Quentin 在评论中所说：

如果文本对人类来说不够好，那么对搜索引擎来说也不够好。

您不应该隐藏替代文本。谷歌知道这仅用于搜索引擎优化目的，没有什么重要的作用，并将因此受到惩罚。并且您可能会被列入 Google 搜索引擎的黑名单。

因此，不要仅将它们用于 SEO 目的。