在Firefox上使用框大小更改div的大小填充

Question

我正在嘗試向DIV中的元素添加填充。我的問題是，它將這個填充添加到我的DIV的總大小。

我試着在我的div下面的代碼來阻止這樣的：

box-sizing: border-box; 
ms-box-sizing: border-box; 
webkit-box-sizing: border-box; 
moz-box-sizing: border-box; 

它適用於Chrome的罰款，但我仍然對Firefox瀏覽器的問題。我不明白爲什麼。

任何人都有如何解決這個問題的想法？

非常感謝

Answer 1

如果你想微胖添加到div的寬度：

div { 
    // In this example total div width is 120px 
    // box-sizing: content-box is the default style. No need to specify it. 
    width: 100px 
    padding: 0 10px; 
} 

或者，如果你想總的div寬度的填充部分：

div { 
    // In this example total div width is 100px 
    // support Firefox, WebKit, Opera and IE8+ 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; //always place the standard declaration last, so it overwrites browser specific ones in case they get deprecated 
    width: 100px 
    padding: 0 10px; 
}