鍍鉻的div按鈕上的小死角空間

Question

我無法解釋這一個。我有一個按鈕的div。我使用：active psuedo類和position：relative;稍微向下移動，點擊時向右移動，給它一個動畫。由於某種原因，Chrome中的這個按鈕在文本和按鈕邊緣之間有一個很小的死角。 psuedo類仍然會觸發，但按鈕上的Javascript不會。如果我刪除了相對位置，問題就會消失。這也發生在Firefox中，但Firefox中的死區位於按鈕移動的邊緣，這是有道理的，但也需要修復。

我創建了一個的jsfiddle，藉以說明問題：http://jsfiddle.net/dillydadally/CUHA7/6/

任何想法，爲什麼發生這種情況？有沒有辦法解決它？

Answer 1

CSS。這是因爲margin：10px;上#btn

編輯

如果使用onmousedown事件而的onclick它會奏效。

解釋：

僞類在onClick之前被激活。如果您將：active的值從2px更改爲20px。即使您點擊按鈕的中間位置，也會看到這種情況。

所以的左側和頂部由設置新值後：主動，鼠標是不是在DIV的頂部了，不能註冊點擊（按下並釋放）。

但onmousedown仍然被觸發，因爲它不依賴於鼠標按鈕的釋放。