Firefox, CSS显示:table / table-cell和height。

Im displaying several content in div and span elements in a table like style.

我将在div和span元素中显示一些内容，比如style。

<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>

The glyphicon-remove should be vertically centered, which works fine in Chrome and IE 11 but not Firefox 52.

象形文字的移除应该垂直居中，在Chrome和IE 11中效果不错，但不是火狐52。

The expected result looks like this:

预期的结果如下:

The Firefox result looks like this:

Firefox的结果如下:

What am I doing wrong here? I created a fiddle.

我在这里做错了什么?我创建了一个小提琴。

1 个解决方案

#1

the 0.7em on the class item-glyphicon was not required for mozilla. so i made that rule chrome specific. Heres the link to working fiddle, https://jsfiddle.net/x1uydngo/9/

在mozilla中不需要类项-glyphicon上的0.7em。我把这个规则具体化了。这里是工作小提琴的链接，https://jsfiddle.net/x1uydngo/9/。

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