使用 box-sizing :border-box in Firefox 的 CSS 填充问题

Question

我在 Firefox 中遇到了一个奇怪的问题，调试控制台似乎在骗我，或者我遗漏了什么。

这是 body 标签的 CSS:

html, body {
    width: 100%; 
}

body {
    padding: 5% 10% 0 10%; 
    font-size: 1.2em;
    font-family: 'Raleway', Arial, sans-serif; 
    font-weight: 300; 
    color: #2b2b2b; 
    margin: auto; 
    max-width: 1200px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

我正在使用属性“box-sizing”，所以最大宽度应该是 1200px，里面有填充。正如调试控制台所说(在右下角)，内容区域的宽度应该是 898px 但如果我测量它，这就是我真正得到的:

我对 box-sizing:border-box 属性有误吗？

谢谢大家!

编辑: 我做了一个 jsfiddle here用一个简化的案例。

看看下面的图片，你会发现 html、检查员给出的盒子模型、渲染图和我在 Photoshop 上添加的红色方 block (实际上是 150x150 像素)。我不明白，检查员说盒子是 150x150 但这是错误的......

Answer 1

你使用的是哪个版本...如果你使用的是旧版本而不是尝试 addking -moz-

{
-webkit-box-sizing: border-box; /* for older webkit browsers */
-moz-box-sizing: border-box;  /* for older mozilla browsers */
box-sizing: border-box;  /* for latest browsers */
}