クロムのdivボタンの小さなデッドスペース

Question

これは説明できません。私はボタンであるdivを持っています。私は：アクティブな擬似クラスと位置を使用します：相対;右クリックするとアニメーションが表示されます。何らかの理由で、Chromeのこのボタンには、ボタンのテキストとエッジの間の半分ほどのデッドスペースがあります。擬似クラスはまだ発火しますが、ボタン上のJavascriptは起動しません。私が相対的な立場を取り除くと、問題はなくなります。これはFirefoxでも起こりますが、Firefoxのデッドスペースは、ボタンが途中で動いている端にありますが、意味がありますが固定する必要があります。

私は、問題を表示するためにJSFiddleを作成：http://jsfiddle.net/dillydadally/CUHA7/6/

なぜこれが起こっているすべてのアイデアを？それを修正する方法はありますか？

Answer 1

CSS。 マージンのためです：10px;あなたはそれが動作しますむしろonclickのれるonmousedown使用する場合#btn

EDIT

に。

説明：

擬似クラスはonClickの前にアクティブ化されています。 ：activeを2pxから20pxに変更した場合。ボタンの真ん中をクリックしていても、これが表示されます。

そうで設定された左と上の新しい値の後：アクティブ、マウスはもうdiv要素の上ではなく、クリック（プレスをしてを解放）を登録することはできません。

しかしonmousedownは、マウスのボタンのリリースに依存しないため、引き続きトリガーされます。