在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; 
}