Drzwi przesuwne Element przycisku zepsuł się tylko w Firefoksie

Question

Próbuję zrobić przycisk drzwi przesuwnych, które mogą być używane w ogólnym celu wszystko działa dobrze, z wyjątkiem Firefoksa. Element span w przycisku zawsze niższy 2px w FF.

tutaj jest przykładem

http://jsbin.com/orami3/4

Answer 1

Spróbuj tego:

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

(pamiętać, że dwukropek (:) jest podwojona, tak.)

Dodatkowe dopełnienie w tym przypadku jest spowodowane przez niejasny błąd przeglądarki Firefox.

(o napotkał ten błąd się znalazłem rozwiązanie at this blog, za pomocą wyszukiwarki Google.)

Answer 2

Cóż, nie wiem, dlaczego tak się dzieje, ale jest jakaś dziwność tutaj. Wpływa także na Safari i jest nieco inny. Jeśli dodasz margines ujemny do zakresu przycisków, przeniesie on połowę odległości w Firefoksie, niż w Safari. Rozwiązanie wydaje się równoważyć obraz tła. Oto jeden ze sposobów, aby je siekać:

/*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;  
} 

Przykład tutaj: http://jsbin.com/orami3/9