Firefox 中的滚动错误答案

【问题标题】：Scrolling bug in FirefoxFirefox 中的滚动错误
【发布时间】：2016-05-18 15:55:41
【问题描述】：

我最近一直在研究叠加菜单。它将包含一长串名称（无法避免）。它在 Chrome 上表现完美，但列表拒绝在 Firefox 上滚动。我不知道是什么原因造成的，但我创建了一个 JSFiddle 来显示正在发生的事情。

链接here

一点 HTML：

<div class="full-menu">
  <div class="full-menu--middle">
    <button class="menu-toggle menu-toggle--close"></button>    
    <div class="section group menu_items">
        <ul>
            <li>a bunch of options vvv</li>
        </ul>
    </div>
  </div>
</div>

一点 CSS：

html,
body {
    height: 100%;
    width: 100%;
}


.main_menu {
    display: none;
}

.full-menu {
    visibility: hidden;
    display: table;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
}

.full-menu--open {
    visibility: visible;
    opacity: 1;
}

.full-menu--middle {
    display: table-cell;
    vertical-align: middle;
}

.menu-toggle {
    background-color: transparent;
    border: 0;
    color: #fff;
    position: fixed;
    left: 20px;
    top: 20px;
}

.menu-toggle:before {
    content: '\f0c9';
    font-family: 'FontAwesome';
    margin: 0 20px 0 0;
}

.menu-toggle--close {
    position: fixed;
    top: 20px;
    left: 20px;
}

.menu-toggle_black {
    background-color: transparent;
    border: 0;
    color: #000;
    position: fixed;
    left: 20px;
    top: 20px;
}

.menu-toggle_black:before {
    content: '\f0c9';
    font-family: 'FontAwesome';
    margin: 0 20px 0 0;
}

.menu_items{
    overflow: scroll;
    height: 100%;
}

.page_inner_ {
  display: table-cell;
  vertical-align: middle;
}

.page_container {
    display: table;
    height: 100%;
    width: 100%;
    position: relative;
    color: #ffffff;
}

任何帮助将不胜感激！谢谢

【问题讨论】：

我在 FF 和 Chrome 上看到了完全相同的行为。我正在使用 Mac。确保你的 FF 是最新的
嘿，我在最新版本上运行，并有一个朋友为我测试。确切的问题是，如果您打开小提琴并单击图标打开菜单，列表将在 Chrome 上滚动，但在 Firefox 上不会滚动。我还没有找到任何方法让它在 FF 上滚动。你运行的是哪个版本？我也在 OS X 上，不幸的是在多个设备上都没有运气
检查你的控制台是否有错误，我在 FF 中得到 Error: Syntax error, unrecognized expression: a[href*=#]:not([href=#])。我什至没有在代码中看到任何锚点。哦，nvm 列表滚动，是的，您将它作为位置 fixed，所以它不会滚动，更改为 absolute
哎呀，这有点从实际站点遗留下来。
元素是一个 href="#" 锚，我把它留在了小提琴中。如果您的意思是 .full-menu，将其更改为绝对意味着它不幸地位于列表底部时会滚动出视口。我的主要问题是它在 Chrome 上完美运行，而不是 FF：/