Question

此代码在Chrome中有效，光标显示为指针，并按原样注册click事件，但不在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;，然后从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>

按钮：悬停：在Firefox中无法点击之前

1 个答案: