在Firefox中<button>无法点击但在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上的

#app-header div导致此问题。尝试寻找替代方法 - 似乎Firefox误解了这一点并将可点击区域放在窗口外。

Answer 2

像这样编写按钮代码

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>