Question

我有两个推送菜单：左和右。在移动设备上查看时，右侧推送菜单无法正常工作（下面的问题1）。此外，两个菜单都不适用于IE 11（下面的问题2）。

移动 - 在手机上，当您打开左侧推送菜单然后关闭它右侧菜单推入视图，你无法摆脱它。
IE问题 - 在IE 11中，推送菜单不会出现，原因如下据我所知，是：位置：固定;适用于 menu-push-left和menu-push-right元素。我原本有位置：绝对的;但这会导致菜单推右元素只在IE中打开而不是＆＃34;滑动＆＃34; in。我没有想法为什么位置：固定;在这个IE实例中不起作用。 IE 7+，我知道，支持position：fixed;

有人可以查看我的代码并告诉我可能错过的内容吗？

JsFiddle在这里：http://jsfiddle.net/totaleeyou/0w5w4t4s/8/

body {
    color:#2c2c2c;
    background-color:#ffffff;
    padding:0;
    margin:0;
    font-size:1em;
    font-family:Arial, Helvetica, sans-serif;
    overflow-x:hidden;
}

body.has-active-menu-push-left,
body.has-active-menu-push-right {
    overflow:hidden;
}

body, header.scroll, header ul.logo, #menu-push-left, #menu-push-right, button.menu-close i.fa-times-circle-o, .page-masking {
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    -ms-transition:all 0.5s;
    -o-transition:all 0.5s;
    transition: all 0.5s;
}
body.has-active-menu-push-left, #menu-push-left {
    -webkit-transform:translate(100%, 0);
    -moz-transform:translate(100%, 0);
    -ms-transform:translate(100%, 0);
    -o-transform:translate(100%, 0);
    transform:translate(100%, 0);
}
body.has-active-menu-push-right, #menu-push-right {
    -webkit-transform:translate(-100%, 0);
    -moz-transform:translate(-100%, 0);
    -ms-transform:translate(-100%, 0);
    -o-transform:translate(-100%, 0);
    transform:translate(-100%, 0);
}
@media only screen and (min-width:780px) {
    body.has-active-menu-push-left, #menu-push-left {
        -webkit-transform:translate(500px, 0);
        -moz-transform:translate(500px, 0);
        -ms-transform:translate(500px, 0);
        -o-transform:translate(500px, 0);
        transform:translate(500px, 0);
    }
    body.has-active-menu-push-right, #menu-push-right {
        -webkit-transform:translate(-500px, 0);
        -moz-transform:translate(-500px, 0);
        -ms-transform:translate(-500px, 0);
        -o-transform:translate(-500px, 0);
        transform:translate(-500px, 0);
    }
}

.wrapper {
    width:100%;
    padding:0;
    position:relative;
}
@media only screen and (min-width:780px) {
    .wrapper {
        width:1000px;
        margin:0 auto;
        padding: 0 5px;
    }
}

#page-masking {
    position:fixed;
}
.page-mask {
    z-index:100;
    top:0;
    left:0;
    width:0;
    height:0;
    background-color:#bec4a6;
}
.page-mask.is-active {
    width:100%;
    height:100vh;
    opacity:.7;
        -webkit-transition:opacity .5s;
            transition:opacity .5s;
}
.close-container {
    width:100%;
    height:55px;
    padding:5px;
    position:relative;
}
button.menu-close {
    color:#fdbc5d;
    text-decoration:none;
    font-size:3em;
    position:absolute;
    top:5px;
    right:25px;
    display:block;
    border:none;
    background:none;
}

#menu-push-left,
#menu-push-right {
    position:fixed;
    top:0;
    width:100%;
    height:100vh;
    z-index:150;
    overflow-x:hidden;
    overflow-y:auto;
    background-color:#0079c1;
}
#menu-push-left {
    left:-200%;
}
#menu-push-right {
    right:-200%;
}
@media only screen and (min-width:780px) {
    #menu-push-left {
        width:500px;
        left:-1000px;
    }
    #menu-push-right {
        width:500px;
        right:-1000px;
    }
}

Answer 1

我将你的menues的位置改为'fixed'，这似乎就是诀窍=）

#menu-push-left, #menu-push-right {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 150;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #0079c1;
}

CSS菜单没有推入

1 个答案: