Html Chrome无法正确显示内联块div

我在一个基本的网站上工作-只有html和css。这是：

我在右上角有社交媒体图标。这四个图标位于一个容器中，并使用display:inline块显示

它们在Safari和Firefox中显示良好，但在Chrome中默认显示为12像素宽的div

Safari和Firefox：

铬：

当我在chrome中打开开发者工具时，图标显示出来，尽管是以一种奇怪的方式：

下面是一个类似情况的简短介绍：

下面是一些与容器/项目相关的强制性代码，因此我可以发布一个JSFIDLE链接：

div.menucontainer
{
    position:absolute;
    top:0;
    right:0;
    height:100%;
}
div.menuitem
{
    height:100%;
    display:inline-block;
    width:50px;
}

---

思考？

这是你所做的正确行为。您为图像指定了100%的高度而不是宽度。您是否尝试在.menuitem上设置高度？@Alex，这是什么意思？chrome通过将图标粘贴到右上角来正确显示图标，而我的代码本身就不正确？或者说chrome确实为您正确显示，这只是我这边的一个问题？我将.menuitem的高度设置为100%。查看小提琴，了解我打算如何显示它，以及它在Safari和FF中的显示方式。为什么不能为菜单项设置固定尺寸？