相邻的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大小的边框而不是extra。