1

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

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

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

感谢你们 ！

编辑：我在这里用一个简化的案例做了一个 jsfiddle 。

看下图，你会发现 html、inspector 给出的盒子模型、渲染和我在 Photoshop 上添加的一个红色方块（实际上是 150x150px）。我不明白，检查员说盒子是150x150但它是错误的......

Firefox 上的 box-sizing 和检查器问题

4

3 回答 3

2

您使用的是哪个版本...如果您使用的是旧版本，请尝试 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 */
}
于 2014-01-08T12:54:55.240 回答
0

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

那么你有两个选择：

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

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

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

于 2014-01-08T13:36:45.897 回答
0

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

于 2014-01-08T13:01:48.530 回答