<button> Firefoxでunclickableが、私は次のヘッダー持っているクロム

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> 

を。いくつかの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 

私はこのように見ているヘッダで終わる：

ハンバーガーメニューはなく、Firefoxの下に、クロムの下にクリック可能です。私がすべてのサススタイルを削除すると、h1はボタンの上に表示されますが、ボタンはFirefoxでクリック可能になります。 #app-header divにこの

Answer 1

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

margin-right: -5rem等

Answer 2

ライトボタンのコードは、これを引き起こしています。別の方法を探してみてください.Firefoxがこれを誤解してクリック可能な領域をウィンドウの外に置いているようです。