图片div显示在Safari，Chrome和IE中，但不显示在Firefox中

Question

所以我最近开发了一个网站here，我想知道为什么我的图片div（徽标）出现在Safari，IE和Chrome中但不出现在Firefox中？我试图寻找答案，但没有任何效果。感谢帮助。

这是我的CSS代码：

 #logo-header {
padding-top: 70px;
content:url(../img/logo.png);
margin: 0 auto;
outline: 0; max-width: 100%; height: auto;
margin-bottom: -50px;
}

以下是我在HTML中初始化的方法：

<div id="logo-header"> </div>

再次感谢您的帮助。

Answer 1

代替属性'content'尝试使用'background-image'，firefox会读取它。

Answer 2

Firefox仅接受伪元素谎言content和before中的after。

您可以将css更改为：

background: transparent url(../img/logo.png) no-repeat center center;

并设置适当的高度（类似300px）。

Answer 3

常规元素不支持

content属性（我很惊讶它在其他浏览器中有效）。如果图像是您内容的一部分，请将其放在标记中：

<div id="logo-header">
  <img src="img/logo.png" alt="Logo">
</div>

Answer 4

而不是content使用background：

#logo-header {
background: url(../img/logo.png) no-repeat center;
}