使用box-sizing的CSS填充问题：Firefox中的border-box

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，但如果我测量它，这是我真正得到的：

我是否误解了盒子大小：border-box属性？

谢谢你们！

编辑：我用一个简化的案例制作了一个jsfiddle here。

看下面的图片，你会发现html，检查员给出的盒子模型，渲染和我在Photoshop上添加的红色正方形（实际上是150x150px）。我不明白，检查员说这个盒子是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 */
}

Answer 2

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

Answer 3

实际上Windows 8默认情况下缩放为125％，而Firefox正在使用此比率作为默认缩放级别。

然后你有两个选择：

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

有关此内容的更多信息：https://support.mozilla.org/fr/questions/963759

很高兴知道大多数Windows 8的用户都会看到您的网站在Firefox中的缩放率为125％。