css - 相邻的 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 舍入像素的方式有关，是一个常见的错误。

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

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