在 Firefox 中使用 box-sizing:border-box 的 CSS 填充问题答案

【问题标题】：CSS padding issue using box-sizing:border-box in Firefox在 Firefox 中使用 box-sizing:border-box 的 CSS 填充问题
【发布时间】：2014-01-26 13:59:33
【问题描述】：

我在 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，inspector给出的盒子模型，渲染和我在Photoshop上添加的一个红色方块（实际上是150x150px）。没看懂，inspector说盒子是150x150但是错了……

【问题讨论】：

我可能错了，但我认为您不能在 body 标签上设置最大宽度，因为这是您的视口，并且总是会扩展到屏幕的大小。尝试在 body 标签内添加一个 div 并设置样式
感谢您的有趣回答，我进行了快速测试，但问题仍然存在。看起来在 html 元素上这样做是可以的（如Chris Coyier is saying here）所以我猜body标签也是如此。
您的小提琴在 Firefox 和其他浏览器中为我显示了相同大小的框...
在 Chrome 31.0.1650.63 上，该框实际上是 150x150 像素，而不是在 Firefox 26.0 上。你用的是同一个版本吗？我在 Windows 8 而你呢？

标签： css firefox padding border-box

【解决方案1】：

实际上，Windows 8 默认缩放比例为 125%，Firefox 使用这个比例作为默认缩放级别。

那么你有两个选择：

将 Windows 的缩放级别更改为 100%：控制面板 > 外观 > 显示
设置Firefox的缩放比例为1.0：在浏览器地址栏输入about:config，搜索layout.css.devPixelsPerPx并设置为1.0

更多信息在这里：https://support.mozilla.org/fr/questions/963759

很高兴知道大多数 Windows 8 用户会在 Firefox 中看到您的网站以 125% 的速度缩放。

【讨论】：

【解决方案2】：

因为您的padding values 是从整个屏幕计算的，而不是从1200px 计算的。当您调整窗口大小（使其更小）时，您会看到填充将根据屏幕宽度值进行调整，而不是来自1200px

【讨论】：

调试控制台给出的计算填充值（151px）对我来说是可以的，问题是它不是真实的。看一下截图，内容区域的宽度应该是898px，但不是这样的。

【解决方案3】：

您使用的是哪个版本...如果您使用的是旧版本，请尝试添加king -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 */
}

【讨论】：

正如您在我的问题中看到的那样，我提供了 css 并且已经在使用浏览器前缀。