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