Safari可能出现浮动问题

时间:2014-08-12 16:00:36

标签: jquery css safari jquery-masonry masonry

我正在使用Masonry创建一个平铺的投资组合网格。我正在使用12列网格和几个不同宽度的平铺项目。以下是Chrome和Firefox上的内容:

chrome screenshot

Safari:

safari screenshot

我尝试过使用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
}

1 个答案:

答案 0 :(得分:0)

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

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

.item
    width: 33%