我正在尝试制作自己的网格以满足我的需求，但我无法找到一种方法使其在 Safari（Mac 和 iOS）上具有全宽度。它在其他浏览器（Chrome、Firefox、IE10）中运行良好，但在 Safari 和 Safari 移动版中，它会在右侧留下一个空间。
有什么解决办法吗？我是一个像素完美主义者，所以这让我非常沮丧。
图片预览：
【问题讨论】：
display:table 从 :before 和 :after 移动到 .group - codepen.io/anon/pen/LIpjE 会发生什么（我没有要测试的 Safari）
标签： css safari responsive-design grid sass
这是一个亚像素舍入误差。这在任何流体布局中都很常见，但当您一遍又一遍地执行相同的数学运算时（连续 12 个相等的列），它变得最明显。当您有一个流畅的布局时，有时您的容器（以像素为单位）不会除以您设置的百分比。假设视口为966px 宽，您的列为10%。这意味着每列应该是96.6px 宽。浏览器只是不知道如何处理该部分像素。如果您调整容器的大小，您会看到布局时不时地跳跃，并在容器被整除时完全对齐。
这是一个old problem，浏览器在处理它方面做得越来越好。 IE 曾经四舍五入，这导致更严重的布局问题。现在，大多数浏览器都对此更加智能，但 Safari 仍会向下舍入。
没有办法完全解决这个问题。 没有像素精确、流畅、浮动的布局，但有几种变通方法。我从最简单的开始，然后逐个列出：
尽可能避免重复百分比。任何一个元素只会向下舍入一个部分像素，这意味着您一次不会有超过1px 错误。如果您不堆叠错误，它们更容易隐藏。
将一行中的最后一项向右浮动。这会在列之间移动舍入误差，通常不太明显。
如果您确实无法最小化或隐藏错误，例如在画廊风格的布局中，请尝试 Jon Albin Wilkins 的float isolation method。这是一种笨重的方法，所以我不建议在任何地方都使用它，但在某些情况下它确实很有帮助。像 Susy 和 Singularity 这样的布局系统也会给你这个选项。
结合使用这些技术，您可以将所有舍入误差控制在一个像素内。如果您的设计无法处理单个像素舍入错误，则不应使用流体浮点数，或者您应该考虑Dao。 :)
【讨论】：
问题是 CodePen 中的 SCSS 正在将边距和宽度计算到某个小数级别。
/* Actual Math */
53px / 966px * 100 // = 5.486542443%
/* Codepen Math */
53px / 966px * 100 // = 5.48654%
如您所见，剩余的小数被忽略了，因此您的网格在技术上并没有达到 100%，因此最后有一个空格。
似乎其他浏览器通过假设您的意思是扩展全部 100% 来弥补这一点，而 Safari 则更准确（这是否是正确的方法取决于您要达到的目标）。
【讨论】：