DOCTYPE對CSS有影響嗎？

我想製作一個固定尺寸的容器，裏面有一張圖片（尺寸未知）。然後，我想讓圖像適合容器並以其爲中心（水平和垂直）。我想出的是：DOCTYPE對CSS有影響嗎？

<!DOCTYPE html> 
<html> 
    <body> 
    <div style="width: 500px; height: 375px; display: table-cell; 
       vertical-align: middle"> 
     <img src="./Slideshow_files/Charles Bridge In Prague.jpg" 
      style="max-width: 500px; max-height: 375px"> 
    </div> 
    </body> 
</html>

對於一些圖片，它工作正常。然而，this one（正好是500x375的大小）使外部div的高度比底部的375px（Chrome中爲5px，Opera中爲4px）高出幾個像素。這是爲什麼？？

編輯：只是增加了演示here（和另一個display: table-row和display: table元素，here）。在這兩種情況下，紅色背景都不應該可見;在Chrome中是& Opera。

來源

2011-07-11 akoprowski

第一件事，我看到，雖然這個問題的標題的時候是：IE瀏覽器。有一天晚上我很生氣，因爲IE沒有正確顯示我的網站。後來發現這都是因爲我錯過了'DOCTYPE'。 – Shaz

那麼，我甚至沒有去過IE，但我在Chrome和FF中都遇到了這個問題。 DOCTYPE對CSS解釋有影響是否正常？（順便說一句，我可以完全理解你的沮喪，它也花了我一段時間才能找出它是由於DOCTYPE）。 – akoprowski

是的，這是正常的。更改文檔類型會強制瀏覽器進入不同的渲染模式，這些渲染模式會調整框模型的解釋方式。如果您正在新網站上工作，我強烈建議使用HTML5文檔類型'<！DOCTYPE html>'。 –

您可以通過在img上設置display: block或vertical-align: top（或bottom）來解決問題。

有三種不同的渲染模式：

Quirks模式
幾乎標準模式
標準模式

不同的文檔類型觸發不同的渲染模式。請參閱：http://hsivonen.iki.fi/doctype/

在標準模式下（帶有觸發文檔類型），默認vertical-align爲baseline。

在怪癖模式（沒有文檔類型），默認vertical-align是bottom。

本頁解釋得好：https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

來源

2011-07-11 13:33:05 thirtydot

工程就像一個魅力！內聯元素之後是否存在某種邊距/間距/填充問題？ – akoprowski

我已更新我的答案，以包含解釋和鏈接。 – thirtydot

太棒了！非常感謝你給出了很好的答案。 – akoprowski

DOCTYPE對CSS​​有影響嗎？

回答

相關問題

DOCTYPE對CSS有影響嗎？