css - 伪元素和Firefox 错误

Question

为什么伪元素 :before 或 :after 在 Firefox 中仅在 <button> 中没有光标指针？在其他浏览器中不存在此问题。简而言之，除了 <button> 之外的任何具有类 'button' 的元素都可以在所有浏览器中正常工作，包括 firefox。

示例：https ://codepen.io/Mr_Orange/pen/djKGwY

.area {
  display: flex;
}

.block {
  position: relative;
  display: block;
  width: 400px;
  height: 400px;
  background-color: lightgray;
  margin-right: 32px;
}

.button {
  display: inline-block;
  background-color: orange;
  border: 0;
  padding: 12px 24px;
  text-decoration: none;
  color: white;
  cursor: pointer;
}

.button:before {
     position: absolute;
     display: block;
     top: 40px;
     right: 40px;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 100%;
     content: "";
     background: red;
     z-index: 20;
  }

<div class="area">
  <div class="block">
    <button type="button" class="button">test</button>
  </div>
  <div class="block">
    <a href="#!" class="button">test</a>
  </div>
</div>

标签： cssgoogle-chromefirefoxsass