为什么这个标志在 Firefox 中不显示？答案

【问题标题】：Why does this logo not display in Firefox?为什么这个标志在 Firefox 中不显示？
【发布时间】：2014-12-27 02:44:33
【问题描述】：

比较 Chrome 和 Firefox 中 Sudomemo Theatre 的顶部栏。我一直在寻找“Sudomemo Theatre”徽标不会在 Firefox 中显示的原因；我已经尝试过 Linux、Windows 和 Mac。我只能得出结论，它归结为渲染引擎。

但是为什么不显示，我该如何解决？我想从根本上理解这个问题。在我看来，Firefox 没有正确呈现 css 内容属性。

谢谢！

注意顶部浮动菜单栏；它的左侧应该有一个“Sudomemo Theatre”标志。它在 Chrome for Windows 和 Linux (Chromium) 中正确显示，但在 Firefox 中不正确。我不能假设每个人都拥有最新版本。

【问题讨论】：

【解决方案1】：

似乎 Firefox 仅支持带有 :before 或 :after 伪类的 content CSS 属性，但不支持“裸”元素。

将规则更改为此有效，尽管图像现在太大了：

a.navbar-brand:before {
    content: url("/images/sudomemotheatrelogomedium.png");
    padding: 10px;
}

有关详细信息，请参阅documentation of content on MDN。这似乎是how the standard is written，所以从技术上讲，Chrome 按原样工作在这里可能是错误的。

【讨论】：