Question

我正在使用jquery砌体，但在测试跨浏览器时，safari存在问题。

Chrome和firefox是相同的，但safari看起来利润微乎其微。

所以我对每个砌砖项目有2％的保证金，这些项目在chrome / firefox上工作正常但在safari上的余量很小。

％确实可以在safari上工作，如果我说放20％的保证金它确实增加了保证金，但仅限于第一项/可能是第一个垂直行。在chrome / FF上，左边距适用于每个项目。

目前我使用的是：

#buildcontainer {
width: 100%;
margin-top: 6%;
}

.blogresults { 
width: 22.7%;
border: 0px solid #fff;
background-color: #fff;
margin-left: 2%;
z-index: 500;
disply: inline-block;
float:left;
}

我将剩余边距更改为例如10px它工作正常并适用于所有浏览器，它只是导致问题的百分比。

注意，＃buildcontainer是砌筑物品的保存位置。

Answer 1

不确定您使用的是哪个版本的Safari，但当我在Safari的旧桌面版中检查the plugin demo时，我能够重现该问题。在计算绝对位置时，每个元素的1％边距都不计算在内。

以下是一些想法......

使用插件的 gutter 选项设置元素之间的水平空间

http://masonry.desandro.com/options.html#gutter

codepen上示例的链接显示了如何将其添加到现有HTML /脚本中。因为，这适用于所有浏览器，您必须调整或删除CSS中的边距。

仅为webkit浏览器应用像素边距

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .blogresults {  margin-left: 10px;   }
}

在元素左侧添加边框

作为最后的手段......你可以尝试通过添加左边框来模仿空间。只要背景不是图像或渐变，它就会显示为空格。

.blogresults { 

   // Margin and initial border property has been removed
    width: 22.7%;
    background-color: #fff;
    z-index: 500;
    display: inline-block;
    float:left;

   // Left border has been added
    border-left: 5px solid #fff; 
}

Safari在使用jQuery Mason时忽略了边距

1 个答案: