Safari在右侧留出一个空间，网格宽度为100％

Question

我试图制作符合我需求的自己的网格，但我无法找到一种方法让它在Safari（Mac和iOS）上达到全宽。它在其他浏览器（Chrome，Firefox，IE10）中运行良好，但在Safari和Safari移动设备中，它在右侧留下了空间。

这有什么解决方案吗？我是一个完美主义者，所以这让我很沮丧。

图片预览：

演示：http://codepen.io/PatrickVerwoerd/pen/wImcu

Answer 1

这是一个子像素舍入错误。它在任何流体布局中都很常见，但是当你反复进行相同的数学运算时，它变得最为明显（连续12列相等）。如果您有流畅的布局，有时您的容器（以像素为单位）不会按您设置的百分比均匀分配。假设视口宽966px，您的列为10%。这意味着每列应该96.6px宽。浏览器不知道如何处理该部分像素。如果你调整容器的大小，你会立即看到布局跳，当容器可以被整除时，它会完全正确排列。

它是old problem，浏览器在处理它时变得越来越好。 IE用于向上舍入，这导致更糟糕的布局问题。现在，大多数浏览器都更加智能，但Safari仍然会逐渐减少。

没有办法完全解决问题。 没有像素精确，流畅，浮动的布局，但有几种解决方法。我从最简单的开始，并在列表中工作：

1. 如果可能，请避免重复百分比。任何一个元素都只会向下舍入一个部分像素，这意味着您一次不会有超过1px个错误。如果您没有堆叠错误，则更容易隐藏。

2. 将最后一项放在右侧的行中。这会在列之间移动舍入误差，通常不太明显。

3. 如果你真的不能最小化或隐藏错误，例如在画廊风格的布局中，试试Jon Albin Wilkins＆＃39; float isolation method。这是一个笨重的方法，所以我不建议在任何地方使用它，但在某些情况下它可能是真正有用的。像Susy和Singularity这样的布局系统也可以作为一种选择。

通过这些技术的组合，您可以将所有舍入误差保持为单个像素。如果您的设计无法处理单个像素舍入错误，则不应使用流体浮点数，或者您应该考虑使用Dao。 ：）

Answer 2

问题是CodePen中的SCSS正在计算边距和宽度到某个小数级别。

/* Actual Math */
53px / 966px * 100 // = 5.486542443%

/* Codepen Math */
53px / 966px * 100 // = 5.48654%

正如您所看到的，忽略了剩余的小数，因此您的网格技术上不会加起来达到100％，因此最后会占用一个空格。

似乎其他浏览器通过假设您的意思是延长100％而使Safari更加准确来补偿这一点（无论是否正确的appraoch将取决于您正在尝试实现的目标）。