Firefox的button后加伪元素无按钮行为

最新推荐文章于 2018-05-28 17:40:51 发布

DPJune

最新推荐文章于 2018-05-28 17:40:51 发布

阅读量1k

点赞数

分类专栏：前端工程文章标签：浏览器伪元素 firefox chrome

本文链接：https://blog.csdn.net/dpj514/article/details/79772512

版权

前端工程专栏收录该内容

7 篇文章 0 订阅

订阅专栏

最近，在看CSS揭秘这本书的时候，写了一个demo来尝试扩大点击热区功能的实现，但在实现过程中发现了它在不同浏览器中效果不同，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test</title>
    <style>
        button {
            position: relative;
            width: 80px;
            height: 20px;
            margin: 20px 0 0 30px;
            border: solid 2px rgb(28, 168, 86)
        }
    button::after {
        content: '';
        position: absolute;
        top: -10px;
        bottom: -10px;
        left: -20px;
        right: -20px;
        border: solid #808080 2px
    }
    </style>
</head>
<body>
    <button>test</button>
</body>
</html>

效果如图，但是当点击灰色边框和绿色边框之间的区域时，chrome下出现了正常的点击按钮的反馈效果，但firefox下没有任何反应。当我给这个按钮添加click事件时，点击空白区域在chrome下能够正常触发事件，但firefox下不能触发。
ps: 当前firefox浏览器版本为59.0.2，chrome浏览器版本为65.0.3325.181。