css - 按钮 :hover:before not clickable in 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

问题在于您的 before 元素的定位。由于它是绝对定位的，并且按钮本身的宽度和高度设置为 0，因此元素大小为零，您无法与其交互。

要解决此问题，请从按钮中删除 width: 0; 和 height: 0;，并从中删除 position: absolute; :before-伪。

此外，将 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>