OSX 上的 Firefox 错误计算 CSS calc答案

【问题标题】：Firefox on OSX miscalculates CSS calcOSX 上的 Firefox 错误计算 CSS calc
【发布时间】：2016-12-20 16:14:17
【问题描述】：

我们创建了一个定制的网格系统，它使用calc() 来确定在扣除固定值后的列宽...基本上 CSS 输出如下：

.column{
  width: calc((((100% - 35px ) / 8) * 1) + 0px);
}

... 用于 8 列网格的单列宽度。

在本例中（在此断点处），100% 宽度等于 916px。

.column{
  width: calc((((916px - 35px ) / 8) * 1) + 0px);
}

如果你算一下，列宽现在应该是 110.125px；然而，Firefox 计算宽度为 110.133px（根据 Firebug）或 111px（根据 Firefox web 检查器）。当你再次乘以它并添加排水沟时，你会得到一个比父级更宽的值 916.064px（或 923px，取决于你信任的值） -最后一列低于其余列。

只需将装订线调整为 4px 即可轻松修复，但我很想知道 Firefox for OSX 和 calc() 是否存在任何已知问题，或者 calc() 本身是否有问题.

编辑：

我同时确定，这个问题不仅发生在 5px 的装订线中，而且发生在所有奇数上。

旁注：

如果您想知道其中看似不必要的值，calc() 输出是通过 mixin 生成的，它允许我们仅指定网格中的列数、列跨度和固定间距宽度，如下所示：

  $column-span: nth($column-settings, 1);
  $total-columns: nth($column-settings, 3);
  $total-gutters: ($total-columns - 1);
  $sibling-gutters: ($column-span - 1);
  width: calc((((100% - #{($gutter-setting * $total-gutters)} ) / #{$total-columns}) * #{$column-span}) + #{($gutter-setting * $sibling-gutters)});

【问题讨论】：

不幸的是，不同的浏览器的舍入方式不同。在 OSX 上，甚至很多供应商都采用糟糕的设计选择来匹配操作系统风格。如果可能的话，最好的办法是使用现有的网格框架或 CSS Flexbox。
我最初也想到了“舍入误差”，但那不可能——你如何将 0.125 舍入为 0.133？ CSS 舍入错误是（据我所知）和 IE 问题，例如，将舍入 0.666 到 0.67 [使用三分之二时的问题 - 我们已经在我们的 mixin 中对此进行了补偿），因为旧的 IE 轮次2 位小数。这很可能不是这里的情况。
@TylerH 供参考 - 它是 browser bug - 记录了另一个类似的问题，在这种情况下，记者使用了 flexbox，但在使用 calc() 时仍然遇到相同的舍入错误用于网格列宽。

标签： css macos firefox calc

【解决方案1】：

所以这原来是 Firefox 本身的数学错误/问题 - 来自 Mozilla 开发人员之一的解释：

数学无法按您预期的方式运行的原因是它假设 Gecko 代表无限的 CSS 长度（或至少非常高精准度。不是这种情况。表示像素大小内部为整数，系数为 60，因此 916px 变为 54960，和 35px 是 2100。第一个可以被 8 整除，但第二个不能 (262.5)，导致舍入误差 (262)。所以， calc() 表达式在内部表示为“0.125*W - 262”，因此 W=54960 我们得到： 6870 - 262 = 6608（在 CSS 像素中对应于：6608 / 60 = 110.1333333333)。

建议的解决方法（由另一个具有类似数学问题的网格系统的用户）是添加一个 hack，至少在 Firefox 本身解决问题之前：

@media screen and (min--moz-device-pixel-ratio: 0) {
  .column:last-child{
    margin-right: -2px;
  }
}

... 这抵消了不正确舍入所增加的额外宽度。这不是很未来的证明，但它会完成工作；至少在修复浏览器错误之前。

【讨论】：