相邻的 div 在 Safari 中显示 1px 的间隙，但在其他浏览器中没有

Question

在 Safari 中相邻的 div 之间有 1px 的间隙，但在其他浏览器（包括 Chrome 和 Firefox）中没有。看看：http://www.blakearchive.org/blake/public/exhibits/canterburySpecial.html

菜单 div 向左浮动，宽度为 34%，图库 div 向右浮动，宽度为 66%。如果我让画廊 div 向左浮动，则 1px 的间隙会显示在屏幕的最右侧。如果我用边框（1px）填充它，它在 Safari 中看起来很好，但当然它会在其他浏览器中抛出 div 位置。是 Safari 有什么独特的东西让这种情况发生吗？

谢谢。

Answer 1

这与 Safari 如何舍入像素有关，是一个常见的错误。

例如，如果您有一个 100 像素的包装器，具有 3* 33.33% 宽度的 div，Safari 会将其四舍五入为 33%，并使每个 div 宽 33 像素，这意味着总共将是 99 像素，您会注意到 1 像素的间隙.

您尝试的修复通常是一个很好的解决方案。如果您将 box-sizing 设置为 border-box，这应该会阻止 div 被抛出位置，因为border-box 在 div 的大小中包含边框，而不是额外的。