CSS Margin在IE和Safari中无法正常工作

Question

正在构建一个CSS菜单，由于某种原因，子菜单的边距在IOS和IE 11中显示不同。

贝娄是一些照片＆amp; css代码

这应该是什么样子以及它在chrome中的表现方式。

这是IE＆amp; IOS safari显示，边距应该从向上更高，并且应该小于左边。

这是代码

header .left li .mega-menu {
    background-color: #31342a;
    position: absolute;
    border-radius: 0px 0px 3px 3px;
    margin:-50px 0px 0px 0px;
    visibility: hidden;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4); /** Firefox */
    -o-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4); /** For Opera */
    opacity: 0;
    transition: visibility 0.1s linear 0.1s,opacity 0.5s linear, margin 0.5s;
    z-index: -1;
}

header .left li:hover > .mega-menu {
    visibility: visible;
    opacity: 1;
    margin: 15px 0px 0px 0px;
    transition-delay:0s;
}

Answer 1

你能试试吗？ 我想你错过了display:block;

header .left li .mega-menu {
    background-color: #31342a;
    position: absolute;
    border-radius: 0px 0px 3px 3px;
    margin:-50px 0px 0px 0px;
    visibility: hidden;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4); /** Firefox */
    -o-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4); /** For Opera */
    opacity: 0;
    transition: visibility 0.1s linear 0.1s,opacity 0.5s linear, margin 0.5s;
    z-index: -1;
display:block;
}

header .left li:hover > .mega-menu {
    visibility: visible;
    opacity: 1;
    margin: 15px 0px 0px 0px;
    transition-delay:0s;
}