ボタン：ホバー：Firefoxでクリックできない前

Question

このコードはChromeで動作します。カーソルはポインタとして表示され、クリックイベントを登録する必要がありますがFirefoxでは登録されません。私の理由を教えてくれますか？

@import url('https://rawcdn.githack.com/WordPress/dashicons/242e2712334e30648b328e91c44366d55ef2146a/icon-font/css/dashicons.css'); 
 

 
button.slick-arrow, 
 
button.slick-arrow:hover, 
 
button.slick-arrow:focus { 
 
    background: none !important; 
 
    text-indent: initial; 
 
    -webkit-font-smoothing: antialiased; 
 
    vertical-align: top; 
 
    font-size: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border: none; 
 
} 
 
button.slick-arrow:before { 
 
    display: block; 
 
    position: absolute; 
 
    font: normal 32px/1 'dashicons'; 
 
    padding: 8px; 
 
    opacity: 0.6; 
 
    color: #000; 
 
    cursor: pointer; 
 
} 
 
button.slick-arrow:hover:before { 
 
    opacity: 1; 
 
} 
 
button.slick-prev:before { 
 
    content: "\f341"; 
 
    left: 8px; 
 
} 
 
button.slick-next:before { 
 
    content: "\f345"; 
 
    right: 8px; 
 
}

<button class="slick-prev slick-arrow">Click me!</button>

Answer 1

問題があなたの前に要素の配置の中に産みます。それは絶対的に配置され、ボタン自体の幅と高さは0に設定されているため、要素のサイズはゼロで、そのボタンと対話できません。

これを修正するには、width: 0;とheight: 0;をボタンから削除し、:before -pseudoからposition: absolute;を削除します。

さらに、ボタンにcursor: pointer;を追加します。

@import url('https://rawcdn.githack.com/WordPress/dashicons/242e2712334e30648b328e91c44366d55ef2146a/icon-font/css/dashicons.css'); 
 

 
button.slick-arrow, 
 
button.slick-arrow:hover, 
 
button.slick-arrow:focus { 
 
    background: none !important; 
 
    text-indent: initial; 
 
    -webkit-font-smoothing: antialiased; 
 
    vertical-align: top; 
 
    font-size: 0; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 
button.slick-arrow:before { 
 
    display: block; 
 
    font: normal 32px/1 'dashicons'; 
 
    padding: 8px; 
 
    opacity: 0.6; 
 
    color: #000; 
 
} 
 
button.slick-arrow:hover:before { 
 
    opacity: 1; 
 
} 
 
button.slick-prev:before { 
 
    content: "\f341"; 
 
    left: 8px; 
 
} 
 
button.slick-next:before { 
 
    content: "\f345"; 
 
    right: 8px; 
 
}

<button class="slick-arrow slick-prev">Click me!</button>