html - 在 Firefox 上使用 box-sizing 填充更改 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;
}