CSS填充拉伸Divs：Internet Explorer比。 Chrome/Firefox

你好StackOverflow社區，我遇到了一個問題，坦率地說是令我困惑，我很驚訝，我沒有更早地遇到這個問題。CSS填充拉伸Divs：Internet Explorer比。 Chrome/Firefox

道歉，如果我忽略了一些簡單的事情 - 我做了大量的Google和StackOverflow搜索無濟於事。

我的問題是，當應用填充到div時，容器被Firefox/Chrome中的指定填充量拉伸，但不在IE中。我看到了添加「display：inline;」的建議或「display：inline-block;」解決問題，但這對我有影響。

下面是一個呈現例子：

而這個例子的代碼：

<html> 
<head> 

<style type="text/css"> 
#div1 { 
background-color:black; 
width:400px; 
height:300px; 
padding-top:10px; 
} 

#div2 { 
background-color:red; 
width:400px; 
height:280px; 
padding-top:10px; 
} 

#div3 { 
background-color:blue; 
width:400px; 
height:260px; 
padding-top:10px; 
} 

#div4 { 
background-color:green; 
width:400px; 
height:200px; 
} 
</style> 

</head> 
<body> 

<div id="div1"> 
<div id="div2"> 
    <div id="div3"> 
    </div> 
</div> 
</div> 
<div id="div4"> 
</div> 

</body> 

</html>

我缺少什麼？任何幫助，將不勝感激。

謝謝。

來源

2011-11-03 iamlolz

A <!DOCTYPE ... >是你缺少的。 IE以Quirks模式呈現，其中框模型是邊框而不是內容框。

來源

2011-11-03 05:10:16

非常感謝。我以爲這可能是以前的問題，但是當我測試它時，我必須選擇錯誤的文檔類型或者它可能被捕獲到緩存中。不可思議的我很偉大，我相信你可以節省數小時的頭痛。謝謝你，Kolink！ – iamlolz

CSS填充拉伸Divs：Internet Explorer比。 Chrome/Firefox

回答

相關問題