最新 Chrome：浮动在 -webkit-column 内损坏

Question

使用列的预期表单布局：

key: value     |     key: value     |     key: value

key: value     |     key: value     |     key: value

key: value     |     key: value     |

key 在多列布局中固定宽度 float: left。

<form>
    <label>
        <span>key:</span>
        <span><input value="value"/></span>
    </label>
    <label>
        <span>key:</span>
        <span><input value="value"/></span>
    </label>
    ...
</form>

只要在 <form> 上设置 -webkit-column-count，最新的 Chrome 就会在 'key' 和 value 之上呈现彼此。

浮点数背后的想法是允许 value 输入字段占用剩余的可用 space.

请参阅 http://jsfiddle.net/99ckf72q/，在 Firefox 中按预期工作。

WebKit 中的错误？

Answer 1

这不是 webkit 错误。您没有正确使用列数。当您使用列计数时，最好避免浮动和显示块。 试试下面的 CSS。

form  {
    -moz-column-count: 2;
    -webkit-column-count: 2;
}
form label {
    -moz-column-count: 2;
    -webkit-column-count: 2;
}
label {
    display: block;
}
input {
    width: 100%;
    box-sizing: border-box;
    background: none;
}

Answer 2

似乎已在 Chrome 45.0.2454.9 / WebKit build 537.36

中修复