Firefox中的列宽和图像包装

Question

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

Example in JSFiddle

<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中被破坏/未实现？

Answer 1

不幸的是，据报道bug in Webkit's CSS renderer。 Firefox和Opera的行为符合预期。

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

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

<强>演示

Try before buy

我猜不是预期的答案，但可能仍然有用。