在Firefox中与无序列表一起使用时，CSS列失败（27）

我遇到了一个问题，即使用无序列表组织的菜单将无法在Firefox（27）中填充CSS两列布局。它在IE10和Chrome（32）中工作良好

我还没有找到任何解决这个问题的办法，但我猜这不可能是我独有的。下面是一个JSFIDLE演示了这个问题：

fiddle中的代码（堆栈表示这是必需的）——HTML:

---

谢谢。

删除moz的列填充属性，它将正常工作。对我来说好像是个虫子

或者，您可以添加显式高度

---

有趣的是，我还发现将fill属性改为“balance”而不是“auto”同样有效。请参见fiddle:Balance是列填充的默认值

<div id="container">
    <ul>
        <li>
            When
        </li>
        <li>
            I
        </li>
        <li>
            Look
        </li>
        <li>
            To
        </li>
        <li>
            The
        </li>
        <li>
            Sky
        </li>
    </ul>
    <ul>
        <li>
            When
        </li>
        <li>
            I
        </li>
        <li>
            Look
        </li>
        <li>
            To
        </li>
        <li>
            The
        </li>
        <li>
            Sky
        </li>
    </ul>
    <ul>
        <li>
            When
        </li>
        <li>
            I
        </li>
        <li>
            Look
        </li>
        <li>
            To
        </li>
        <li>
            The
        </li>
        <li>
            Sky
        </li>
    </ul>
    <ul>
        <li>
            When
        </li>
        <li>
            I
        </li>
        <li>
            Look
        </li>
        <li>
            To
        </li>
        <li>
            The
        </li>
        <li>
            Sky
        </li>
    </ul>
    <ul>
        <li>
            When
        </li>
        <li>
            I
        </li>
        <li>
            Look
        </li>
        <li>
            To
        </li>
        <li>
            The
        </li>
        <li>
            Sky
        </li>
    </ul>
    <ul>
        <li>
            When
        </li>
        <li>
            I
        </li>
        <li>
            Look
        </li>
        <li>
            To
        </li>
        <li>
            The
        </li>
        <li>
            Sky
        </li>
    </ul>
    <ul>
        <li>
            When
        </li>
        <li>
            I
        </li>
        <li>
            Look
        </li>
        <li>
            To
        </li>
        <li>
            The
        </li>
        <li>
            Sky
        </li>
    </ul>
    <ul>
        <li>
            When
        </li>
        <li>
            I
        </li>
        <li>
            Look
        </li>
        <li>
            To
        </li>
        <li>
            The
        </li>
        <li>
            Sky
        </li>
    </ul>
    <ul>
        <li>
            When
        </li>
        <li>
            I
        </li>
        <li>
            Look
        </li>
        <li>
            To
        </li>
        <li>
            The
        </li>
        <li>
            Sky
        </li>
    </ul>
</div>

#container {
    -webkit-column-count: 2;
    -webkit-column-gap: 0;
    -webkit-column-fill: auto;
    -moz-column-count: 2;
    -moz-column-gap: 0;
    -moz-column-fill: auto;
    column-count: 2;
    column-gap: 0;
    column-fill: auto;
}

#container {
    -webkit-column-count: 2;
    -webkit-column-gap: 0;
    -webkit-column-fill: auto;
    -moz-column-count: 2;
    -moz-column-gap: 0;
    /*-moz-column-fill: auto;*/
    column-count: 2;
    column-gap: 0;
    column-fill: auto;
}

#container {
    -webkit-column-count: 2;
    -webkit-column-gap: 0;
    -webkit-column-fill: auto;
    -moz-column-count: 2;
    -moz-column-gap: 0;
    -moz-column-fill: auto;
    column-count: 2;
    column-gap: 0;
    column-fill: auto;
    height: 30em;
}