内容后的随机空格（Webkit 浏览器错误）答案

【问题标题】：Random white-space after content (Webkit browser bug)内容后的随机空格（Webkit 浏览器错误）
【发布时间】：2014-02-01 16:27:47
【问题描述】：

我的服务页面底部出现未知空白。我正在使用column-count: 2; 将图像分成两列。

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

问题是左侧栏mainCont底部的多余空间。

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

这里是JSFIDDLE (remove/show in url to view code)，看看问题出在哪里。这里还有Live Site，因此您可以看到它如何影响每个服务页面。

主容器的 CSS：

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

编辑

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

那是在图片和10px之间不是50-70px。让我在 PS 中打开一个屏幕截图，我会知道不应该存在的确切空间量。
参考我添加的图片。
顺便说一下这个问题对FF无效
或 IE 所以这是一个 webkit 问题
如果图像大小不同，页面底部会出现多余的空格。这是一个 chrome 错误code.google.com/p/chromium/issues/detail?id=297782