Safari 在使用 jQuery Masonry 时忽略边距答案

【问题标题】：Safari ignoring margins when using jQuery MasonrySafari 在使用 jQuery Masonry 时忽略边距
【发布时间】：2013-12-30 19:22:30
【问题描述】：

我正在使用 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 是存放砌体的地方。

【问题讨论】：

我希望我可以，但砌体项目是动态的，重现所有布局等对于 jsfiddle 来说是一项艰巨的任务。网站也没有直播所以不能举个例子。我知道很烂。
只是增加了项目的大小，正如预期的那样。我会注意到这个问题并回来讨论它
1) 我认为这更多是 jquery masonry 的问题，因为如果我重新加载 safari 项目是正确的，直到它们适合网格然后它们松动那里的边距。 2）我的项目都是自己的 div，它们应该作为一个列表来完成吗？

标签： jquery css safari jquery-masonry percentage

【解决方案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; 
}

【讨论】：