css - Firefox 中的列宽和图像换行

Question

在 Firefox 中使用 CSS3column-width属性似乎无法按预期工作。当存在高于其容器的图像时，图像不会按预期换行到新列：

<div id="container">
    <img src="http://placehold.it/300x600" alt="" />
</div>

和

#container {
    border: 1px solid #000;
    width: 1200px;
    height: 300px;
    -moz-column-width: 300px;
    -webkit-column-width: 300px;
}

人们会期望两列，左侧上半部分，然后是图像的下半部分。这在 Chrome 上按预期工作，但是对于 Firefox，它似乎只是溢出。在这种情况下是否需要应用额外的 CSS 样式，或者这是在 Firefox 中被破坏/未实现的东西？

score 0 · Accepted Answer

不幸的是，这是Webkit 的 CSS 渲染器中报告的错误。Firefox 和 Opera 的行为符合预期。

让 Webkit 正确呈现它的唯一方法是将图像的最大高度设置为容器的高度：

#container > img {
    max-height: 300px;
}

演示

我猜不是预期的答案，但也许仍然有帮助。

1 回答 1