Javascript CSS/JQuery菜单在Firefox中无法正常运行

所以，我创建了TogleableOverlay菜单，并在所有主流浏览器（甚至在Internet Explorer中）中进行了测试，除了Firefox（在46版中进行了测试）之外，它在任何地方都可以正常工作

问题是，当您通过按“菜单”按钮切换覆盖时，覆盖中的“关闭”按钮不会出现，用户无法打开菜单。
它应该是这样的： 这就是它的样子 所以我请求你的帮助，因为我已经没有主意了

-摆弄工作代码

HTML代码 JQuery切换代码

---

Firefox不完全支持显示flex

---

看起来像你期望的那样吗

    $menu-color: #3c948b;   



    .flex-vhcenter-parent{
      display: block;
      justify-content: center;
      align-items: center;
    }



    /* Main Nav menu styles */


    .button{
      transform: scale(1.3);
      transition: all 500ms;
      margin: 0 auto;
    }


    .main-nav{
        display: inline-block;
        width: 100%;
        transition: all 500ms;
        z-index: 20;
        background-color: $menu-color;
        position: absolute;
        text-align: center;
        &.fixed{
          .button{
            margin: 0 auto;
            transition: all 500ms;
            transform: scale(1);
          }
        }

    }

    header > div{
      width: 20%;
      display: block;
      align-items: center;
        justify-content: center;
    }
    .main-nav p{
      margin: 0 auto;
      font-size: 1.5em;
    }

    /* Toggleable Overlay */
    .overlay{
      z-index: 30;
      position: fixed;
      width: 100%;
      height: 100%;
      background-color: #000;
      opacity: 0.90;
      top: -100%;
      transition: top 100ms ease-out;
      .button{
        margin: 0 auto;
        color: #fff;
      }
    }

    .opened{
      top: 0%;
      transition: top 100ms ease-out;
    } 

---

显示：Firefox不完全支持flex，它看起来像您期望的那样吗@S.Greczyn是的，非常好，就像所有关于Flexbox的东西一样。顺便问一下，你从哪里得到关于FF中buggy Flexbox的信息？我不能在MDN或Caniuse上缠绕它。@IdeaMan每个浏览器都有flexbox的一些问题。（遗憾的是，这是一种非常好的布局技术）。他有最多的钱。有关的信息。请尝试将.overlay{z-index:30；}更改为.overlay{z-index:19；}

$menu-color: #3c948b;   


.flex-vhcenter-parent{
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
}



/* Main Nav menu styles */


.button{
  transform: scale(1.3);
  transition: all 500ms;
}


.main-nav{
    display: flex;
    width: 100%;
    transition: all 500ms;
    z-index: 20;
    background-color: $menu-color;
    position: fixed;
    &.fixed{
      .button{
        transition: all 500ms;
        transform: scale(1);
      }
    }

}

header > div{
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.main-nav p{
    margin: 0;
  font-size: 1.5em;
}

/* Toggleable Overlay */
.overlay{
  z-index: 30;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.90;
  top: -100%;
  transition: top 100ms ease-out;
  .button{
    margin: 0;
    color: #fff;
  }
}

.opened{
  top: 0%;
  transition: top 100ms ease-out;
} 

overlay = $(".overlay");
$(".button").click(function(event){
    overlay.toggleClass("opened");
});

    $menu-color: #3c948b;   



    .flex-vhcenter-parent{
      display: block;
      justify-content: center;
      align-items: center;
    }



    /* Main Nav menu styles */


    .button{
      transform: scale(1.3);
      transition: all 500ms;
      margin: 0 auto;
    }


    .main-nav{
        display: inline-block;
        width: 100%;
        transition: all 500ms;
        z-index: 20;
        background-color: $menu-color;
        position: absolute;
        text-align: center;
        &.fixed{
          .button{
            margin: 0 auto;
            transition: all 500ms;
            transform: scale(1);
          }
        }

    }

    header > div{
      width: 20%;
      display: block;
      align-items: center;
        justify-content: center;
    }
    .main-nav p{
      margin: 0 auto;
      font-size: 1.5em;
    }

    /* Toggleable Overlay */
    .overlay{
      z-index: 30;
      position: fixed;
      width: 100%;
      height: 100%;
      background-color: #000;
      opacity: 0.90;
      top: -100%;
      transition: top 100ms ease-out;
      .button{
        margin: 0 auto;
        color: #fff;
      }
    }

    .opened{
      top: 0%;
      transition: top 100ms ease-out;
    }