Firefox，CSS顯示：表格/表格單元格和高度

Im在類似樣式的表格中顯示div和中的幾個內容。Firefox，CSS顯示：表格/表格單元格和高度

<div class="row"> 
    <div class="item"> 
    <div class="item-col-glyphicon"> 
     <span class="glyphicon glyphicon-remove item-glyphicon"></span> 
    </div> 
    <div class="item-col1"> 
     <span class="item-col1-a">a</span> 
     <span class="item-col1-b">b</span> 
    </div> 
    <div class="separator"></div> 
    <div class="details"> 
     <span style="display:block">Line 1</span> 
     <span style="display:block">Line 2</span> 
    </div> 
    </div> 
</div>

的glyphicon-remove應垂直居中，其在Chrome和IE 11而在Firefox 52

正常工作預期的結果是這樣的：

Firefox的結果看起來像這樣：

我在這裏做錯了什麼？我創建了一個fiddle。

來源

2017-04-02 Alexander Zeitler

也許它與圖標和容器，都顯示爲表單元格... https://jsfiddle.net/x1uydngo/10/ –

感謝呢！這導致我正確的方向，這裏是最終結果（我需要着色不同於它的body/background的'separator'邊框：https://jsfiddle.net/AlexZeitler/x1uydngo/13/ - 我也添加了一些寬度 - 根據我的需要將表格單元項目的值。 –

@GCyrillus請張貼您的小提琴作爲答案，以便我可以將其標記爲正確的答案。 –

mozilla不需要類class-glyphicon上的0.7em。所以我制定了該規則鉻特定。繼承人的鏈接工作小提琴，https://jsfiddle.net/x1uydngo/9/

@media screen and (-webkit-min-device-pixel-ratio:0) 
{ 
.item-glyphicon{top:0.7em;} 
}

來源

2017-04-02 20:10:30 lhavCoder

Firefox，CSS顯示：表格/表格單元格和高度

回答

相關問題