瀏覽器渲染嚴格/過渡DOCTYPE之間的區別

Question

前段時間我遇到了一個'問題'，我從來沒有深究過。希望有人能夠照亮它。當我將DOCTYPE從嚴格更改爲過渡時，會導致某些瀏覽器（Chrome，Opera和Safari）呈現不同的頁面。我知道這種情況的一般原因是觸發了怪異模式，但根據w3c驗證程序驗證這兩個文件的XHTML和CSS都是有效的。

我只能假設這些瀏覽器爲兩個DOCTYPE使用不同的內部樣式表，但沒有真正的想法爲什麼他們會這樣做。我只是希望有人能證實爲什麼會發生這種情況。

可以看到的差異是「標題圖像」底部和菜單欄邊框之間的空白處。在前面提到的瀏覽器中，當使用過渡性DOCTYPE時，兩者之間沒有差距，但是在嚴格使用時（在IE和FF中，兩者都存在差距）。我最終發現，在img標籤中添加display:block可以阻止所有情況下出現的間隙（這是我的目標）。

transitional example， strict example

Answer 1

在'嚴格'模式下，默認情況下圖像顯示爲內聯元素。內聯元素在底部給出一個空間來解釋諸如g或q等下行字符。由於圖像不會有任何下降字符，這被認爲是奇怪的行爲，導致了「幾乎嚴格」模式的引入。在'幾乎嚴格'模式下，所有img標籤都呈現爲display: block而不是內聯。進一步的細節可以在here找到。

拼圖的最後一部分是，所有現代瀏覽器都以'嚴格'模式渲染嚴格DOCTYPE的頁面，並在'幾乎嚴格'模式下渲染具有過渡DOCTYPE的頁面。更多細節可以在here找到。

非常感謝摩西和賴利，他們提供的一些信息幫助我找到了答案。

Answer 2

我並不真正瞭解這個怪癖自己。我認爲這與空白有關。在怪癖模式下，白色空間更爲寬容。但是，在標準中，空白可能會導致問題。

例如，在你的例子中，你有一個很好的美化來源，易於閱讀。刪除容器和元素之間的空白區域和換行符將允許您刪除某些瀏覽器中的空白（FF，我相信）。要在IE中修復它，你需要添加line-height：0;到圖像的包含元素（在這種情況下，包含錨點或鏈接標記）。

你也應該注意，如果你關心IE6在所有的，作出當具有各>的對自己行的<李將增加各列表項之間多餘的線條。

Answer 3

嚴格和過渡DOCTYPES之間只有一些差異，沒有一個真正解釋這一點。 （注意，我只有FF，安裝了IE，所以我看不到錯誤本身）。至於造成這種情況發生的原因，可能是瀏覽器針對不同渲染模式使用不同樣式表的情況。不過，我認爲這真的只是歸結爲瀏覽器採用不同的方法來呈現每種模式Strict/Trans/Quirks/Frames的頁面。雖然Strict和Trans之間唯一記錄的差異是如何處理表格內的圖像，但瀏覽器不必遵守W3C規範，可以做任何他們真正想要的東西，這往往會導致像你剛纔發現的那樣的錯誤。