我的問題是，在Firefox和鉻我的網站看起來不錯，在怪癖模式，但不是在IE瀏覽器。我意識到我應該添加到我的頁面的開始，並從那裏開始 - 但是當我這樣做時，網站在所有瀏覽器中看起來都一樣，但不是我想要的。當我添加<！doctype html>到我的頁面CSS似乎不工作，頁面看起來更糟
這裏是我的網站DOCTYPE，這裏是我的網站怪癖mode這是我希望它看起來（在Chrome/Firefox）的
這是我的CSS問題？我已驗證它，沒有發現錯誤！
這裏是我的CSS：http://www.biolonline.co.uk/mystyle.css
的問題是（因爲你在正確的標籤是猜的）一個名爲Quirks模式的事情。
如果您編寫的網站沒有文檔類型，瀏覽器會以怪癖模式呈現它。這基本上是瀏覽器僞裝成舊版瀏覽器與舊網站兼容的仿真模式。
沒有簡單的出路：如果你設計你的網站好看怪癖模式，那麼你做錯了，你就不得不解決它。
離開它在怪癖模式不是一種選擇，因爲IE在這種模式下呈現與其他人不同的方式;您的網站在其他瀏覽器中看起來破損，有或沒有文檔類型。
對不起，壞消息。
怪癖模式與標準模式的主要區別在於「盒子模型」。這定義瞭如何處理邊框和邊框的寬度和高度。在怪癖模式下，邊框和邊框位於框內，因此width是框中佔據的整個空間，而在標準模式下，邊框和邊框將添加到框外，因此框總佔用的空間爲width加上margin和border任何一方。這顯然對頁面佈局有很大的影響。還有其他的不同之處，但那會給你帶來最多的問題。
有一個名爲'box-sizing'的CSS功能。這使您可以在上述兩種模式之間切換盒子模型，同時保持標準模式。
這實際上是您的完美解決方案：您只需將box-sizing:border-box;放入您的CSS中（每個元素都使用*選擇器），並解決問題。
不幸的是，box-sizing僅在更新版本的IE中受支持。如果你需要支持IE6或IE7，那麼你的運氣不好。如果你最低的瀏覽器是IE8，那麼你可以使用它，這將解決你的怪癖模式佈局問題的大部分。不是全部，但大多數。
希望有所幫助。
這是否意味着添加* {box-sizing：border-box; }到我的CSS的開始？或者添加框大小：邊框;到每一個元素？我已經添加了* {box-sizing：border-box; }和www.biolonline.co.uk/doctype沒有區別。PHP的 - 如果這個盒子大小解決了這個問題，它將是偉大的！ – user1527487 2012-07-22 11:32:58
@ user1527487：是的，'* {box-sizing：border-box;}'應該可以工作。它**不會修復quirksmode **的所有錯誤，所以你真正的問題依然存在。您尚未指定您正在測試的IE版本;請注意，Box-sizing在IE8以前的版本中不起作用。 （如果是IE8，請檢查它是否處於IE8模式，而不是IE7兼容模式，這會使事情進一步複雜化，並阻止盒子大小工作） – Spudley 2012-07-22 14:15:36
我正在使用IE9。但是，我已經添加了這一點，並沒有區別（很好，沒有什麼區別） - 導航欄在頂部較小！以下是我正在使用http://www.biolonline.co.uk/doctype.php 進行測試的頁面，此頁面的CSS爲http://www.biolonline.co.uk/doctype.css 雖然www。 biolonline.co.uk是我不編輯的頁面，我希望它看起來像。謝謝你的幫助。非常感謝。 – user1527487 2012-07-22 16:44:36
鏈接到頁面html似乎被打破。 – 2012-07-21 15:15:04
你的意思是你一直在設計你的網站沒有文檔類型？ – BoltClock 2012-07-21 15:29:08
是的，我設計的網站沒有DOCTYPE，然後當我添加DOCTYPE它看起來不正確。哦，是的，鏈接不工作，我現在編輯它們。 – user1527487 2012-07-21 16:53:49