css - 字段集的列数不适用于 Firefox

Question

我正在尝试为具有多对标签和输入的表单进行多列布局。它在 Chrome 和 IE 中运行良好，但我无法让它与 Firefox 一起使用。（问题演示）。我尝试删除clear: lefton label，但这无济于事。

这是简化的 HTML：

<fieldset>
    <label>Label 1</label>
    <input type="number" value="0" />
    <label>Label 2</label>
    <input type="number" value="0" />
    ...
</fieldset>

这是CSS：

fieldset {
    height: 110px;      
    border: none;

    column-count: 2;        
    -moz-column-count: 2;
    -webkit-column-count: 2;    
}

label {
    float: left;
    clear: left;
    width: 125px;
    text-align: right;
    padding: 3px 0 3px 0;
    margin: 2px 0 2px 0;
}

input {
    float: left;
    width: 50px;
    height: 20px;
    margin: 3px 0 3px 10px;
}

我也尝试过使用columns，但没有运气。是否有我没有添加的 Firefox 所需的规则？

Answer 1

这已经在 bugzilla 上报告过了，奇怪的是你不能使用column-count这个<fieldset>元素 - 看看：https ://bugzilla.mozilla.org/show_bug.cgi?id=727164

如果您将 a 替换为<fieldset>a<div>或任何其他元素，它将起作用

http://jsfiddle.net/6CmJb/5/