CSS - 塊元素忽略的line-height

Question

編輯：我需要繼續前進，現在，所以我暫時補充style="line-height:50px到第一li項目（nav-item--home）的span元素。如果有人看到兩個網站之間的差異，這使得第一個<a>元素忽略它的line-height，請讓我知道。

我試圖實現從網站上的頂部導航欄相同的造型：

https://acrobotic.com

在網站上：

http://learn.acrobotic.com

正如你所看到的， <ul>中的第一個元素不與其他元素垂直對齊。元素組成：

<li class="nav-item nav-item--home level0 level-top active"> 
    <a class="level-top" href="http://learn.acrobotic.com/"> 
    <span class="ic ic-home"></span> 
    </a> 
</li> 

通過比較兩個我注意到<span>元件具有正確的大小（30x16）。但是，包含它的元素有不正確的高度16px（54x16），因此它應該是50px。它的高度應該由line-height屬性設置，只要它是一個塊元素。

對於使用開發者工具的控制檯調試目的，我通過檢查CSS：

jQuery('.ic-home').parent().css('display') 
"block" 

jQuery('.ic-home').parent().css('line-height') 
"50px" 

這兩個屬性似乎是正確設置，但是，正如標題中提到，該塊元件是忽略了line-height財產。如果你能照亮這個問題，我會很感激，因爲在我的頭撞牆這兩天已經過去了。

Answer 1

我在開發工具中看到css： .menu-trigger，.nav-regular .nav-item.level0> a和圖標的「a」標記設置爲50px而不是其他設置「 li一個「標籤設置爲20px。如果你改變它清除。