在 Firefox 中使用无序列表时 CSS 列失败 (27)

Question

我遇到一个问题，即使用无序列表组织的菜单不会填充 Firefox (27) 中的 CSS 两列布局。它在 IE10 和 Chrome (32) 中运行良好。

我还没有找到解决这个问题的方法，但我猜它对我来说不是独一无二的。这是一个演示问题的 jsfiddle:http://jsfiddle.net/yGyeh/1/

fiddle 中的代码(Stack 说这是必需的)--HTML:

<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>

CSS:

#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;
}

谢谢。

Answer 1

删除 moz 的 column-fill 属性，它可以正常工作。对我来说似乎是个错误。

http://jsfiddle.net/yGyeh/2/

#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;
}

或者，您可以添加明确的高度。

http://jsfiddle.net/yGyeh/3/

#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;
}