替换css中的图片答案

【问题标题】：Replacing image in css替换css中的图片
【发布时间】：2016-01-12 10:58:56
【问题描述】：

从元素中“删除”文本的最常用方法是使用text-indent: -9999px，但现在我读到最好使用

text-indent: 100%;
white-space: nowrap;
overflow: hidden;

这样浏览器就不必创建那个 9999px 的框了。但是为什么我们不能只使用font-size: 0？使用这种方法到底有什么问题？

【问题讨论】：

css-tricks.com/video-screencasts/142-hiding-things-with-css

标签： css overflow font-size text-indent

【解决方案1】：

不同的浏览器对它的处理方式不同，而且变化太多，我无法一一列举。一些常见问题是浏览器不知道如何处理font-size:0 之类的规则，并显示文本，就好像没有编写字体大小规则一样。在其他情况下，文本可能仍然可见，只是不是那么可读。而其他浏览器（mozilla，netscape7）做你想做的，不显示文本

如果不测试font-size:0，我猜边距和填充仍然可见，尽管这可能在这两种情况下都是一个问题。

我个人什至会使用rgba 并将不透明度设置为0.0，然后再尝试font-size:0

【讨论】：

我在每个现代浏览器 + IE8 + Safari for windows 中都尝试过font-size: 0，它几乎在任何地方都能完美运行（IE8 中元素的高度降低了）。我猜它可能在旧版浏览器中不起作用，但让我们面对现实吧，我们不关心那些旧版（rgba 与font-size: 0 相比并不更好，因为IE8 甚至不支持rgba，对吧？
实际上是非常公平的观点，尽管我在谷歌上搜索了更多示例，在这里：webdesign.about.com/od/fonts/qt/tipfont0.htm。 “适用于 Mac 和 Safari 的 IE：文本以默认大小显示，就好像没有 font-size 属性一样”。虽然我不确定这篇文章是什么时候发布的

【解决方案2】：

这真的取决于你。我个人也使用 text-indent 作为标题，因此当页面加载 CSS 文档时，文本将是一个占位符，直到 CSS 加载完成。此外，每当我执行 'text-indent: -9999px' 时，我都看不到任何性能变化。

基本上，使用 'font-size: 0' 或 'text-indent: -9999px' 并没有什么明显的缺点，它们都可以正常工作。

【讨论】：

那没有回答 OP 的问题。
好的，谢谢您的回复。我想使用text-indent: -9999px 没有任何明显的性能问题，这只是我读过的内容。我猜text-indent: -9999px 更好，因为font-size: 0 可以减少元素的高度，如果它没有预定义的话。