css - 为什么当我点击顶部的几个像素时我的按钮不起作用

Question

我做了一个 stackblitz 来让你理解我的问题。 我认为这与我的按钮 css 有关...

基本上，当您点击顶部几个像素的按钮时，状态不会切换，也就是它不会检测到点击

https://stackblitz.com/edit/angular-qiq87e

Answer 1

只需删除此 css 样式即可完美运行。

button:active {
    /* margin-top: 1%; */ //remove it
    margin-bottom: 5%;
    -webkit-box-shadow: inset 10px 10px 5px -8px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 10px 10px 5px -8px rgba(0,0,0,0.75);
    box-shadow: inset 10px 10px 5px -8px rgba(0,0,0,0.75);
}