<button> 在 Firefox 中不可点击，但在 chrome 中有效答案

【问题标题】：<button> unclickable in Firefox but works in chrome<button> 在 Firefox 中不可点击，但在 chrome 中有效
【发布时间】：2017-02-18 17:45:19
【问题描述】：

我有以下标题：

      <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 中可单击。

【问题讨论】：

看起来#app-header div 上的margin-right: -5rem 导致了这种情况。尝试另一种方式，似乎 Firefox 将可点击区域置于窗口之外。
是的，就是这样。把它作为一个答案，这样我就可以给你一个赞成票。

标签： css twitter-bootstrap reactjs firefox sass

【解决方案1】：

#app-header div 上的margin-right: -5rem 导致了这种情况。尝试寻找一种替代方式——似乎 Firefox 误解了这一点，并将可点击区域置于窗口之外。

【讨论】：

谢谢。我最终用 h2 上的 padding-right: 2.5rem 替换它。

【解决方案2】：

这样写按钮代码

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

【讨论】：

我不是要禁用它，而是要让它可点击