css - 在 Firefox 中不可点击，但在 chrome 中有效

Question

我有以下标题:

      <header id="app-header"
              className="fluid-container navbar navbar-default">
          <div>
            <button className={buttonClass}
                    onClick={this.openSideBar}>
              <span className="glyphicon glyphicon-menu-hamburger"></span>
            </button>
          </div>

          <h1>{this.props.title}</h1>
      </header>

它使用最新稳定版本的 react 和 boostrap。

我用一些 sass 来设计它:

#app-header

      margin-bottom: 5px
      display: flex
      flex-direction: row
      height: 5rem

      div
        width: 5rem
        margin-right: -5rem  // let the h2 center align on the whole row

        button
          background: transparent
          border: none
          width: 100%
          height: 100%

          &:hover
            background: white

      h1
        height: 100%
        margin: 0
        flex: 2
        text-align: center
        font-size: 2rem
        display: flex
        align-items: center
        justify-content: center

我最终得到一个如下所示的标题:

汉堡包菜单在 chrome 下可以点击，但在 firefox 下不能。如果我删除所有 sass 样式，h1 将位于按钮顶部，但按钮在 firefox 中可以点击。

Answer 1

margin-right: -5rem on #app-header div 导致了这个。尝试寻找替代方法——Firefox 似乎误解了这一点并将可点击区域放在了窗口之外。