CSS 列错误 - 5 列计数仅显示 4（带图像）答案

【问题标题】：CSS columns bug — 5 column count only showing 4 (with images)CSS 列错误 - 5 列计数仅显示 4（带图像）
【发布时间】：2012-03-07 08:20:58
【问题描述】：

我正在尝试实现 Chris Coyier 的 example 使用 CSS 列创建无缝响应式图像网格。

我将 Chris 的文件放到了我的服务器上，一切看起来都很好。我唯一改变的是实际图像。

现在，正如您在我的test page 上看到的那样，使用column-count:5;，只有 4 列图像而不是指定的 5 列。第五列只是空白，没有内容。

仅当浏览器窗口大于 1200 像素时才会发生这种情况。当浏览器窗口小于 1200px 时，媒体查询会启动并减少列数 4、3、2，最后是 1。换句话说，这个错误只会在 column-count: 为 5 及以上时发生

这发生在 FF 10、Chrome 17+ 和 Safari 5+ 中。

任何帮助将不胜感激！

这是修剪后的 HTML：

<section id="photos">

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        ...                     

</section>

这是未改动的 CSS：

* { margin: 0; padding: 0; }

#photos {
   /* Prevent vertical gaps */
   line-height: 0;

   -webkit-column-count: 5;
   -webkit-column-gap:   0px;
   -moz-column-count:    5;
   -moz-column-gap:      0px;
   column-count:         5;
   column-gap:           0px;

}
#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 1200px) {
  #photos {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
  #photos {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  #photos {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}

【问题讨论】：

我发现当浏览器窗口大于 1200px 时，column-count:7 和 column-count:10 可以正常工作。我仍然需要找出为什么 column-count:5 不起作用。

标签： css responsive-design fluid-layout portfolio

【解决方案1】：

当我的浏览器达到 1219 像素宽时（至少正如 Firesize 告诉我的那样），我得到 5 列。在此之下，我也得到 4。火狐 10。

可能发生的一些事情：

我的垂直滚动条正好是 19 像素宽
Firefox 窗口的左右边框各 9 像素，总共 18 像素

似乎其中之一被包含在媒体查询中。

编辑：虽然有点奇怪，因为乍一看W3 media queries site 似乎暗示：

“宽度”媒体功能描述了输出设备目标显示区域的宽度。对于连续媒体，这是视口的宽度（如 CSS2，第 9.1.1 节 [CSS21] 所述）包括渲染滚动条的大小（如果有)

【讨论】：

我认为滚动条可能是问题所在，但为什么 Chris 的示例可以完美运行？唯一的区别是他使用 PHP 来填充图像。我将使用 PHP 吐出的图像并将其直接放入 HTML 中。现在测试......由于某种原因它可以正常工作。我要看看是不是因为我的图片是正方形的，而且高度没有变化。
好的，我有一个答案，虽然它是一种解决方法，而不是修复方法。我更改了图像，使一些高度为 300 像素，而另一些为 370 像素。基本上我改变了图像的高度并保持所有图像的宽度相同，300px。因此，答案是要么不使用方形图像，要么使用column-count:4 而不是 5。如果有人能进一步了解为什么会发生这种情况，那就太好了。
我在 Chris 的示例中得到了相同的效果：只有当 Firesize 告诉我我在 1219 像素时，第 5 列才会消失。但是，我确实注意到我的 Firefox 窗口的左右边框是 9 像素宽，并且考虑到 8 的两倍等于 18.... 是时候更新我的答案了：D
稍微编辑了我的答案。开始认为 FF 符合我提到的 W3 规范，并且忽略了窗口的边界（应该如此）。在我急于再次编辑我的答案之前要等一下：D（如果你能完成这件事，当然欢迎任何人提出编辑建议！）

【解决方案2】：

好的，我有一个答案，虽然这是一种解决方法，而不是修复方法。我改变了图像，使一些高度为 300 像素，而另一些为 370 像素。基本上我改变了图像的高度并保持所有图像的宽度相同，300px。所以答案是要么不使用方形图像，要么如果你想使用所有方形图像，使用 column-count:4 而不是 5。

如果有人可以进一步了解为什么会发生这种情况，那就太好了。

【讨论】：

【解决方案3】：

以防万一其他人在他们的搜索结果中发现这一点，这是因为图像是内联的，所以它们之间有一些空间，请参阅：

How can I eliminate spacing between inline elements in CSS?

我使用该部分的 font-size: 0 来解决这个问题:)

【讨论】：