4

我的服务页面底部出现了一个未知的空白。我column-count: 2;用来在两列之间分解图像。

更新：这是一个 Webkit 浏览器问题

问题mainCont是左侧列底部的额外空间。

如果图像全部对齐，则大约有 30 像素的不需要的空白。虽然如果图像没有对齐，那么会有大约 50-70 像素的额外空白。我在主容器上有一个 10px 的填充，但我找不到是什么造成了额外的间距。

这是一个JSFIDDLE（在 url 中删除/显示以查看代码）来查看问题所在。这里还有Live Site，因此您可以看到它如何影响每个服务页面。

主容器的 CSS：

.mainCont {
    width: 100%;
    background: #f7f7f7;
    padding: 10px;
    position: relative;
    margin-top: 2.5%;
}

编辑

160px底部大约有额外的空间减去 20px（mainCont 和 gridbox img 等于 20px 的填充）。

额外的空间和图像的填充

4

1 回答 1

3

从昨天开始，我一直在研究。

  1. 如果图像大小相等，则在所有浏览器上都没有问题
  2. 如果图像大小不同，页面底部会出现额外的空间。

这是chrome浏览器的bug。平衡算法有问题。他们还没有解决这个问题。你可以在这里看到

于 2014-01-13T19:26:12.000 回答