调试两个网页之间元素固有高度的差异

Question

我有一个看似相同的元素，在两个网页上呈现的略有不同。我确定它们在页面之间的CSS中有一些细微差别，但我无法确定它是什么。一个是具有各种资产编译和缩小层的实时服务器，另一个是静态模型。

HTML非常简单：

    <div class='category-icon'>
      <span class='glyphicon glyphicon-globe'></span>
    </div>

最直接相关的CSS并不复杂：

.category-block .category-icon {
  font-size: 6em;
}

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.glyphicon-globe:before {
  content: "\e135";
}

以下是在Firefox中渲染的方式，检查器打开，以便您可以看到界限：

注意高度差 - 120对84。

以下是Chrome中的计算样式，它显示了相同的行为。再次注意矩形高度和灰色height值的差异。 （Firefox检查器显示相同的结果，但不提供height。）

正如您所看到的，边距，边框或填充中的任何内容都不会造成差异;它是关于<span/>本身或周围文本元素的渲染的东西。 （请注意，line-height两者的正确值均为120px。line-height是否会在一个版本中影响height而在另一个版本中不会影响？{/ p>

据我所知，实际的HTML是逐字节相同的。所以我认为问题出现在CSS的较为诡异的部分。

我该如何诊断这个问题？如果我已经钻了这么远而且在检查员身上看不到任何东西，那么还有什么可能导致高度差？

已编辑添加：已应用的样式（来自Chrome＆＃39;样式＆＃39;标签）也显示相同 - 请参阅overlaid screenshots here。

Answer 1

David，您需要通过样式选项卡查看DOM检查器中的截断样式。您的两个示例中的高度不同。计算样式将告诉您页面呈现的内容，样式选项卡将显示应用于元素的所有CSS规则。寻找类似于 height 的规则： 120px ;

你会在那里找到罪魁祸首。