Chrome与Firefox中按钮边缘点击异常问题求助

• 在Chrome、Firefox、Opera浏览器中，点击按钮最边缘会出现异常行为：CSS的:active状态被触发（按钮缩放），但绑定的JavaScript onclick事件并未执行
• Safari浏览器无此问题，暂未测试Edge和IE
• 尝试修改按钮的border-width（设置无边框或粗边框），问题没有任何改善

演示效果：

测试用完整代码 #

HTML

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <button onclick="myFunction()">Click me</button>
  <p id="demo"></p>
</body>

</html>

CSS

button:active {
  transform: scale(.9);
}

JavaScript

function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

内容的提问来源于stack exchange，提问作者KobeSystem