Phần tử cửa trượt chỉ vỡ trong Firefox chỉ

Question

Tôi đang cố gắng thực hiện nút cửa trượt có thể được sử dụng cho mục đích chung mọi thứ hoạt động tốt ngoại trừ Firefox. yếu tố nhịp trong nút luôn thấp hơn 2px trong FF.

đây là ví dụ

http://jsbin.com/orami3/4

Answer 1

Hãy thử điều này:

button::-moz-focus-inner { 
    border: 0; 
    padding: 0; 
} 

(ghi nhớ rằng các dấu hai chấm (:) được tăng lên gấp đôi, vâng.)

Phần đệm thừa trong trường hợp này là do lỗi Firefox tối nghĩa.

(Sau khi tự mình gặp lỗi này, tôi đã tìm thấy giải pháp at this blog, qua tìm kiếm của Google.)

Answer 2

Vâng, tôi không biết tại sao điều này xảy ra, nhưng có một số lạ ở đây. Nó cũng ảnh hưởng đến Safari và hơi khác một chút. Nếu bạn thêm một lề âm vào khoảng thời gian nút, nó sẽ di chuyển một nửa khoảng cách trong Firefox so với nó trong Safari. Vì vậy, giải pháp dường như bù đắp hình nền. Dưới đây là một cách để hack nó:

/*grey button hacks non-IE*/ 
button.grey span{ 
    background-position: 0 -1px; 
} 
button.grey:hover span{ 
    background-position: 0 -36px;  
} 
button.grey:active span{ 
    background-position: 0 -71px;  
} 

/* IE workaround. The \9 makes non-IE ignore these styles*/ 
button.grey span{ 
    background-position: 0 0px\9; 
} 
button.grey:hover span{ 
    background-position: 0 -35px\9;  
} 
button.grey:active span{ 
    background-position: 0 -70px\9;  
} 

Ví dụ ở đây: http://jsbin.com/orami3/9