Flexbox容器中的圖標在Chrome上彈出，但不在Firefox上

Question

我正在嘗試使用flexbox來構建導航菜單以對齊元素。菜單將包含文字鏈接和圖標，並具有這樣的結構：

<header> 
    <div>Logo</div> 
    <nav> 
     <ul class="Navigation__nav-menu"> 
      <li><a href="/">Home</a></li> 
      <li><a href="/">About</a></li> 
      ... 
     </ul> 
     <ul> 
      <li> 
       <a href="#" class="Navigation__social-icons-item-link"> 
        <img src="icon.png"> 
       </a> 
      </li> 
      ... 
     </ul> 

這裏的工作示例：https://jsfiddle.net/7brw7s18/1/

的問題是，在Firefox的圖標尊重父元素和高度的寬度被相應地設置。在Chrome上，它會被垂直拉伸。 任何想法爲什麼會發生這種情況？

Answer 1

認爲你的問題是在錨「顯示柔性」，嘗試刪除它，如下所示：

.Navigation__social-icons-item-link { 
    //display:flex 
} 

這裏是fiddle