調試兩個網頁之間元素固有高度的差異

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

下面是瀏覽器，其中顯示了相同的行爲計算的樣式。再次注意矩形高度的差異，以及灰顯的值。 （Firefox的檢查顯示了同樣的結果，但不給height。）

正如你所看到的，這沒有什麼的空白，邊框或填充是造成差別;這是關於呈現<span/>本身或周圍的文本元素的東西。 （請注意，line-height是正確120像素兩種。是有一些原因的line-height會影響一個版本，但不height在其他？）

據我所知，實際的HTML是字節換字節相同。所以我認爲這個問題是在CSS的毛髮部分。

我該如何去診斷這個問題？如果我鑽了這麼遠，在檢查員看不到任何東西，還有什麼可能導致高度差？

---

編輯補充：施加的樣式（從Chrome '風格' 標籤）也出現相同的 - 見overlaid screenshots here。

Answer 1

David，您需要通過樣式選項卡查看DOM檢查器中的截斷樣式。你的兩個例子的高度是不同的。計算後的樣式會告訴你頁面已經渲染了什麼，樣式選項卡會顯示所有應用於元素的CSS規則。尋找與 高度相似的規則 ： 120px ;

你會發現那裏的罪魁禍首。