我的问题是，在 Firefox 和 chrome 上，我的网站在 quirks 模式下看起来不错，但在 IE 中却不行。我意识到我应该添加到页面的开头并从那里开始 - 但是当我这样做时，网站在所有浏览器中看起来都一样，但不是我想要的。
这是我的网站DOCTYPE，这是我的网站在怪癖mode 这是我希望它看起来的样子（在 chrome/firefox 中）
这是我的 CSS 的问题吗？我已经验证过了，没有发现错误！
【问题讨论】：
标签： css internet-explorer doctype quirks-mode
问题是（正如您在标签中正确猜到的）一种叫做 Quirks Mode 的东西。
如果您编写的网站没有 doctype，浏览器会以 Quirks 模式呈现它。这基本上是一种模拟模式，让浏览器伪装成旧版浏览器以兼容旧版网站。
没有简单的方法可以解决这个问题：如果您将网站设计为在 quirks 模式下看起来不错，那么您做错了，您将不得不修复它。
将其保留在怪癖模式不是一种选择，因为 IE 在此模式下的呈现方式与其他人不同；您的网站在其他浏览器中无论有无 doctype 都会看起来很糟糕。
很抱歉带来坏消息。
怪癖模式和标准模式的主要区别在于“盒子模型”。这定义了如何根据框的宽度和高度来处理边距和边框。在 quirks 模式下，边距和边框在盒子里面，所以width 是盒子占据的整个空间，而在标准模式下，边距和边框被添加到盒子外面，所以盒子占据的空间总数是width 加上两边的margin 和border。这显然对页面布局有很大的影响。还有其他差异，但那是会给您带来最多问题的差异。
有一个名为 'box-sizing' 的 CSS 功能。这允许您在上述两种模式之间切换盒子模型，同时保持标准模式。
这实际上是您的完美解决方案：您只需将box-sizing:border-box; 放入您的CSS 中的每个元素（使用* 选择器），问题就解决了。
很遗憾，box-sizing 仅在更新的 IE 版本中受支持。如果你需要支持 IE6 或 IE7，那你就倒霉了。如果您的最低浏览器是 IE8，那么您可以使用它，这将解决您的大部分怪癖模式布局问题。不是全部，而是大部分。
希望对您有所帮助。
【讨论】：
* {box-sizing:border-box;} 应该可以工作。但是，它并不能解决 quirksmode 的所有问题，因此您的真正问题仍然存在。您尚未指定要测试的 IE 版本；请注意，Box-sizing 在 IE8 之前的任何版本中都不起作用。 （如果是 IE8，请检查它是否处于 IE8 模式，而不是 IE7 兼容模式，这会使事情变得更加复杂，并阻止 box-sizing 工作）