Không gian chết nhỏ trên nút div trong chrome

Question

Tôi không thể giải thích điều này. Tôi đã có một div đó là một nút. Tôi sử dụng: psuedo hoạt động lớp và vị trí: tương đối; để di chuyển nó xuống một chút và sang phải khi được nhấp, để cho nó hoạt hình. Vì một lý do nào đó, có một khoảng trống nhỏ trên nút này trong Chrome khoảng một nửa giữa văn bản và cạnh của nút. Lớp psuedo vẫn cháy nhưng Javascript trên nút thì không. Nếu tôi loại bỏ vị trí tương đối, vấn đề sẽ biến mất. Điều này cũng xảy ra trong Firefox, nhưng không gian chết trong Firefox là ở rìa nơi mà nút di chuyển ra khỏi con đường, điều này có ý nghĩa nhưng cũng cần phải được sửa.

Tôi tạo ra một JSFiddle để hiển thị các vấn đề: http://jsfiddle.net/dillydadally/CUHA7/6/

Bất cứ ý tưởng tại sao điều này đang xảy ra? Có cách nào để khắc phục nó?

Answer 1

CSS. Đó là vì số tiền là : 10px; trên #btn

EDIT

Nếu bạn sử dụng onmousedown thay onclick nó sẽ làm việc.

Giải thích:

Lớp giả đang được kích hoạt trước khi bật. Nếu bạn thay đổi giá trị của: hoạt động từ 2px đến 20px. Bạn sẽ thấy điều này xảy ra ngay cả khi bạn đang nhấp vào giữa nút.

Vì vậy, sau khi giá trị mới của trái và đỉnh được thiết lập bởi: hoạt động, chuột không phải là trên đầu trang của div nữa và không thể đăng ký nhấp chuột (nhấn và thả).

Nhưng onmousedown vẫn được kích hoạt vì nó không phụ thuộc vào việc nhả nút chuột.