html - Firefox:100% 和内部填充？

Question

我有一个宽度为 100% 的 div，里面有段落。 div 的内边距为 1.1em。在 Chrome 上，一切都按预期工作——div 占据了父级空间的 100%，段落由于填充而被挤压了一点。

但是在 Firefox 上，div 扩展到 100% + padding。如何在 Firefox 上强制使用内部填充？

Answer 1

如何在 firefox 上强制使用内边距？

使用box-sizing: border-box;对于元素，默认情况下，padding border 和 margin 算在元素之外。

使用 box-sizing: border-box; 会改变框模型，这将使​​ padding 和 border 被计算在内元素而不是外部。

Demo 没有 box-sizing

Demo 使用 box-sizing

看出区别了吗？在第二个演示中，您不会获得水平滚动条，其中我使用 border-box 值作为 box-sizing 属性。