jquery - Safari 在使用 jQuery Masonry 时忽略边距

Question

我正在使用 jquery masonry，但在测试跨浏览器时，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，但是当我检查时 the plugin demo在 旧桌面版本 的 Safari 中，我能够重现该问题。在计算绝对位置时，每个元素的 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; 
}