Firefox，CSS显示：table / table-cell和height

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中无效。

预期结果如下：

ThreeTen Backport

Firefox结果如下所示：

我在这里做错了什么？ 我创建了一个。

Answer 1

mozilla不需要类item-glyphicon上的0.7em。所以我使规则铬特定。下面是工作小提琴的链接，https://jsfiddle.net/x1uydngo/9/

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