网页Header在Firefox中不显示，Chromium浏览器正常，求技术排查

你的头部图片在Firefox中无法显示的核心原因是HTML语法错误——Firefox对HTML规范的容错性比Chromium内核浏览器更低，这类语法错误会导致它直接忽略解析失败的img元素，而Chromium会尝试兼容错误语法，所以能正常显示。

具体错误点 #

你提供的HTML代码里，img标签存在明显语法问题：

<div class="header"><img src="images/header.png"header></div>

• src属性与后面的header之间没有空格分隔，浏览器无法识别这是合法属性
• 标签写法不符合规范，缺少必要的属性分隔与正确的闭合逻辑

修正后的代码 #

将img标签修改为符合HTML规范的写法（建议添加alt属性，这也是网页 accessibility 的要求）：

<div class="header"><img src="images/header.png" alt="header"></div>

或者使用更严谨的自闭合写法：

<div class="header"><img src="images/header.png" alt="header" /></div>

额外优化建议 #

你的CSS存在重复选择器（比如两个h1、两个p），虽然不影响功能，但合并后能提升代码可读性：

h1 {
  color: rgb(255, 255, 255);
  padding-left: 680px;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

p {
  color: white;
  font-family: 'Courier New', Courier, monospace;
  padding-left: 600px;
}

内容的提问来源于stack exchange，提问作者Jomes