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。如果你改变它清除。