填充在Mozilla Firefox和Safari瀏覽器

Question

據我知道，我認爲這是標準的填充總是加起來，你在你的CSS指定，例如用於寬度：

.content{ 
    width:100px; 
    padding:10px; 
} 

<div class="content"></div> 

這個div將有實際寬度爲120px。本標準適用於IE Firefox Opera瀏覽器。 問題是在safari它不一樣，這個div將有100px的總寬度與10px填充內。

這裏是我的情況，我需要解決：

.container{ 
    width:1000px; 
} 

.content{ 
    width:100%; 
    padding:10px; 
} 

<div class="container"> 
    <div class="content"></div> 
</div> 

我需要的內容div來有1000像素像他的父母總寬度和具有內10px的填充。但上面的代碼只適用於safari，在ie和firefox中，opera會變成1020px的總寬度。

Answer 1

聽起來就像你觀察到的行爲是由於W3C盒子模型和「傳統」盒子模型的區別。 Quirksmode.org具有兩者之間的差的一個很好的描述：

1. 在W3C盒模型，一個元素的width給出了框的 內容的寬度，但不包括填充 和邊框。
2. 在傳統的盒模型，一個元素的width給出邊界框的， 包括填充和邊界之間的 寬度。

如果#container將總是具有1000像素的一個固定的寬度，從100％只是改變#content的寬度980px。

注意的是，爲了確保所有的瀏覽器W3C的盒模型，你需要指定valid DOCTYPE。否則，IE和Opera恢復爲「傳統」（或「怪癖」）框模型。