Firefox 渲染不良答案

【问题标题】：Firefox bad renderingFirefox 渲染不良
【发布时间】：2014-03-02 06:47:59
【问题描述】：

我只在 Firefox 上遇到这个问题（IE、Safari 和 Chrome 渲染良好）。

Here 你可以看到重新加载时横幅的高度如何变化。此外，如果您将指针移向侧边栏中的链接整个 div 也会改变位置。 There's no javascript in the code. No % in margins or paddings. 我不会复制整个 CSS 代码，因为它确实很大，但是来自经历过这些问题的人的准确检查就足够了。

【问题讨论】：

您需要将代码的相关部分复制到这里。你能用jsFiddle在最小的测试用例中重现它吗？
听起来像个无关紧要的display: block;...
@p.s.w.g ，我不能，因为这是我正在开发的 Wordpress 主题。
@Kroltan，代码中没有使用display: block;。

标签： javascript html css wordpress firefox

【解决方案1】：

您没有 doctype，因此位于您永远不想成为的 quirks mode 中。仿佛又回到了 1999 年。将此添加到页面的第一行，让我们知道它是如何进行的：<!DOCTYPE html>

不幸的是，在古怪的情况下创建网站意味着，一旦您将 doctype 放入并切换到“标准模式”，您的布局可能会发生变化，因为一切都按照最初应该呈现的方式呈现。

所有现代网页都需要一个文档类型，并且应该是创建一个文档时首先放下的东西。

Here is a great overall review.

【讨论】：

嗨@Rob，我完全理解你的意思。这是一个 Wordpress 模板。 header.php 包含<!DOCTYPE html>，但它是在一些 div 之后调用的。现在，如果您重新加载，您会看到 <!DOCTYPE html> 是代码中的第一件事。问题仍然存在。
@Gonpires 文档类型必须是第一行的第一个元素，前面没有任何内容。它不能放在其他任何地方。
我明白了，现在这是第一件事。但是，问题仍然存在。
@Gonpires 不是。第 1 行有一些东西。空格也很重要。另外，其他浏览器有什么变化吗？确保刷新页面。请注意，此问题与 IE 相关，而不是其他浏览器。
@Gonpires 通过“这个问题”，我的意思是 IE 仍然会在 doctype 之前出现任何问题。顺便说一句，Chrome 现在显示您处于标准模式。