jquery - Safari 可能出现 float 问题

Question

我正在使用 Masonry 创建一个平铺的投资组合网格。我为我的平铺元素使用 12 列网格和几个不同的宽度。这是它在 Chrome 和 Firefox 上的样子:

和 Safari:

我已经尝试使用 calc、float、box-sizing 和我能得到的所有其他 CSS 声明。奇怪的是，如果您在 Safari 上调整窗口大小，它会自行固定在特定宽度，这让我相信这是 CSS 计算(和亚像素舍入)。

因为 Safari 向下舍入以进行子像素渲染，所以元素总是小于容器。

请在此处查看代码:http://codepen.io/tpalmer75/pen/FijEh

.item {
width: 33.33%
width: -webkit-calc(100% / 3)
width: -moz-calc(100% / 3)
width: calc(100% / 3)
display: inline-block
height: 0
float: left
padding-bottom: 25%
border: 1px solid #333
}

Answer 1

这种效果无法在 Safari 中完全复制，但可以通过删除 calc() 函数并使用稍微小一些的百分比来模仿。

http://codepen.io/tpalmer75/pen/GsEpy

.item
    width: 33%