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