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

Question

我在樣式表中顯示div和span元素中的多個內容。

<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的結果如下所示：

我在這里做錯了什么？ 我制造了一個小提琴 。

Answer 1

Mozilla不需要class item-glyphicon上的0.7em。 因此，我將該規則設置為Chrome專用。 這是工作小提琴的鏈接， https：//jsfiddle.net/x1uydngo/9/

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