Html 奇怪的CSS转换问题

我正在我的网站导航中使用CSS中的转换属性。导航由3个图像组成。当您用鼠标悬停图像时，会应用一个过渡，显示带有一些文本的覆盖。这一切都在Chrome和Firefox中运行良好。然而，狩猎是一片混乱。不仅转换行为根本不起作用，而且无论我做什么，菜单都会停留在第二行，而不是停留在第一行，带有您将从JSFIDLE示例中看到的标志，如果您在Chrome和Safari中打开小提琴，我的意思是什么

CSS:

您可能需要将“输出”窗口稍微展开一点，才能在同一行上看到菜单和徽标，这对于我们来说很好，因为最小分辨率应为1024x768-这不是为移动设备构建的。知道为什么它在狩猎中表现得如此怪异吗

使用，您需要-webkit-。。。所有flex属性的供应商前缀

不是可设置动画的属性。不能对其应用转换。看这个

您不需要使用display:inline flex和position:absolute-display:block就足够了

看看我的

CSS:

您还需要添加显示：-webkit内联flex；为了狩猎。但在我看来，你可以简单地使用display:block；

header nav a img {
    width: 100%;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
}

.menuitem-content {
    top: 15px;
    padding: 5px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    position: absolute;
    text-align: center; 
    vertical-align: middle;
    color: #FFFFFF;
    background-color: rgba(86, 81, 65, .8);
    display: none;
    transition: all 1.2s;
    -webkit-transition: all 1.2s;
    -moz-transition: all 1.2s;
    font-size: 14pt;
    z-index: 999;
    left: 0px;
}

header nav a:hover > .menuitem-content {
    display: inline-flex;
}

header {
    width: 100%;
    background-color: #565141;
    overflow: hidden;
    display: -webkit-flex;
    display: flex;
}

header nav a:hover > .menuitem-content {
    display: block;
}

#content-body {
    background-color: #efefef;
    width: 97%;
    padding: 15px;
    display: -webkit-flex;
    display: flex;
}

footer {
    width: 100%;
    background-color: #565141;
    display: -webkit-flex;
    display: flex;
}