css - Chrome 中的列数可以，但 IE 和 Firefox 中的列数不行

Question

[删除链接]

应该有 5 列。每个帖子都有 20% 的宽度，在 Chrome 中看起来不错，但在 IE 和 Firefox 中，最后一列被推到下面，所以只有 4 个。有人知道为什么吗？

.post {
  width: 20%;
  float: left;
  overflow: hidden;
}

<article class="col post">
    stuff inside
</article>
<article class="col post">
    stuff inside
</article>
<article class="col post">
    stuff inside
</article>
....

Answer 1

不同的浏览器对页边距和填充有不同的默认设置，我怀疑这些设置会造成您的问题。您应该能够通过使用重置 css样式表来消除您的问题。

Answer 2

在这里找到我的答案：https ://github.com/desandro/masonry/issues/166我将 20% 更改为 19,8%

看起来 Firefox 计算百分比宽度与 WebKit 有点不同。一个简单的解决方法是在您的 CSS 布局中留出一点摆动空间，这样列的总和就不会达到 100%。