Firefox不会将表格行显示为Chrome和Internet Explorer

Question

给出以下代码

HTML：

<div class="ci-v-stack-panel" style="width: 400px; height: 500px; border: 1px dashed green;">
    <div id="white" class="ci-v-panel">
        <div style="height: 50px">
            <span>content 0</span>
        </div>
    </div>
    <div id="red" class="ci-v-panel">
        <span>content 1</span>
    </div>
    <div id="green" class="ci-v-panel">
        <span>content 2</span>
    </div>
    <div id="blue" class="ci-v-panel auto">
        <span style="border: 1px dashed black;">content 3</span>
    </div>
</div>

CSS：

#white {
    background-color: white;
}

#red {
    background-color: red;
}

#green {
    background-color: green;
}

#blue {
    background-color: blue;
    color: white;
}

.ci-v-stack-panel {
    display: table;
    table-layout: auto;
}

.ci-v-panel {
    display: table-row;
    height: 0 !important;
    width: 100% !important;
}

.auto {
    height: auto !important;
}

我得到了以下结果： 在codepen上查看：http://codepen.io/mcl7cdm/pen/BzjqQq

最后一个浏览器是Firefox。

我应该怎么做才能让它在Firefox中看起来一样？

Answer 1

给height一个单位和一个大于0的值

.ci-v-panel {
    display: table-row;
    height: 1px;
    width: 100%;
}