在Chrome浏览器中确定的列数，但不在IE和Firefox中

应该有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> 
....

来源

2012-04-21 Barbara

为什么你不使用像http://cssgrid.net/或http://960.gs/ – Connor 2012-04-21 20:55:10

@Connor网格系统我已经使用http://gridpak.com/ http ：//coding.smashingmagazine.com/2012/03/19/gridpak-the-responsive-grid-generator/#more-124759 960基于12或24列，它们都不是5的倍数。 – Barbara 2012-04-21 21:05:31

找到我的答案在这里：https://github.com/desandro/masonry/issues/166我改变了20％至19.8％

看起来像火狐计算百分比宽度略高于 WebKit的不同。一个简单的解决方法是在CSS 布局中允许小小的摆动空间，以便列不会达到100％。

来源

2012-04-22 13:07:18 Barbara

有趣的是：火狐在版本1中曾经遭受过这种痛苦;显然仍然如此 – GlennG 2012-04-23 15:52:32

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

来源

2012-04-21 20:34:26

看一看在实际的网站...我看不到问题，我无法在任何地方找到该样式表，并且如果使窗口变小，它会更改为3列布局。不知道该怎么做......可能是OT。 – 2012-04-21 20:39:07

@Klaus我已经在使用html5boilerplate和normalize.css。 – Barbara 2012-04-21 20:51:38

@GGG css在这里，它应该更改为3列，因为它是一个响应式布局。 – Barbara 2012-04-21 20:51:46

在Chrome浏览器中确定的列数，但不在IE和Firefox中

回答

相关问题