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

认为您的问题是锚点中的'display flex'，尝试按如下方式删除它：

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

这是fiddle