<button>在Firefox無法點擊，但工作在鉻

我有以下標題：<button>在Firefox無法點擊，但工作在鉻

 <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>

它採用反應和自舉的最後一個穩定版本。一些青菜

我的風格是：

#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下。如果我刪除所有sass風格，h1會在按鈕頂部，但按鈕在firefox中可以點擊。這樣

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

來源

2017-02-17 e-satis

看起來像'＃app-header div'上的'margin-right：-5rem'正在導致這種情況。嘗試尋找替代方式，好像Firefox將可點擊區域放在窗口外面。 –

就是這樣。讓它成爲答案，我可以給你一個upvote。 –

margin-right: -5rem上#app-header div

來源

2017-02-18 09:45:19

謝謝。我最終用一個填充替換它：h2上的2.5rem。 –

-1

寫按鈕的代碼是導致此。嘗試尋找另一種方式 - 看起來Firefox似乎誤解了這一點，並將可點擊區域放置在窗口之外。

來源

2017-02-18 06:39:10

我不想禁用它，我試圖讓它可點擊 –

<button>在Firefox無法點擊，但工作在鉻

回答

相關問題