Usuń dodatkowe odstępy / dopełnienie przycisków w przeglądarce Firefox

81

Zobacz ten przykład kodu: http://jsfiddle.net/Z2BMK/

Chrome / IE8 wyglądają tak

wprowadź opis obrazu tutaj

Firefox wygląda tak

wprowadź opis obrazu tutaj

Mój CSS to 

button {
    padding:0;
    background:#080;
    color:white;
    border:solid 2px;
    border-color: #0c0 #030 #030 #0c0;
    margin:0;
}

Jak mogę zmienić przykładowy kod, aby przycisk był taki sam w obu przeglądarkach? Nie chcę używać hiperłączy opartych na JavaScript, ponieważ nie działają one ze spacją na klawiaturze i muszą mieć hrefadres URL, który nie jest przejrzystym sposobem obsługi.

Moje rozwiązanie, ponieważ Firefox 13

button::-moz-focus-inner { margin: -1px; padding: 0; border-width: 1px; }

css firefox button spacing Bryan Field
źródło
Dlaczego dodałeś margin: -1px? Czy to jest w jakiś sposób połączone border: 2px?
Dan
1
Zobacz moją edycję. The border-widthof the -moz-focus-innerbyło 1pxdomyślnie, więc zapis border-widthdo kodu jest zbędny, ale wyjaśnia, co się dzieje. Możliwe, że pomoże to również w przygotowaniu na przyszłość. Odpowiadając na twoje pytanie, border-widthprzyczyną różnicy był Firefox, a dodanie margin: -1pxjest rozwiązaniem, które jest bardziej kompatybilne niż moje poprzednie rozwiązanie.
Bryan Field,
1
Myślę, że zaakceptowana odpowiedź jest wizualnie równoważna, ale lepsza niż twoje rozwiązanie. Zaakceptowana odpowiedź usuwa rzeczy dodane przez FF i sprawia, że ​​rzeczy renderują się tak samo we wszystkich przeglądarkach. Twoje rozwiązanie pozostawia dodatkowe obramowanie dodane przez FF na swoim miejscu i ukrywa jeden piksel dwupikselowej granicy za pomocą margin: -1px. To jest zbyt skomplikowane. Zepsuje się, jeśli: 1) pojawia się błąd w silniku renderowania (tak się dzieje), 2) obramowania mają inny kolor, 3) powiększasz. Aby pokazać potencjalne problemy z twoim rozwiązaniem, przygotowałem skrzypce: jsfiddle.net/Z2BMK / 455 . Powiększ i zwróć uwagę, że pojawia się czerwona ramka.
Dan,
Jedyną zaletą odpowiedzi, jaką widzę, jest zachowanie funkcji FF „przerywanego konturu, gdy przycisk jest aktywny”
Dan,
Tak, właśnie to sprawia, że ​​moje rozwiązanie jest lepsze. Powinno być coś , co powie użytkownikowi, gdzie koncentruje się jego klawiatura.
Bryan Field,

Odpowiedzi:

164

Dodaj:

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

http://jsfiddle.net/thirtydot/Z2BMK/1/

Uwzględnienie borderpowyższej reguły jest konieczne, aby przyciski wyglądały tak samo w obu przeglądarkach, ale także usuwa przerywany kontur, gdy przycisk jest activew przeglądarce Firefox. Wielu programistów pozbywa się tego przerywanego konturu, opcjonalnie zastępując go czymś bardziej przyjaznym wizualnie.

trzydzieści kropek
źródło
8
Aby użyć blasku ostrości w stylu Chrome w przeglądarce Firefox, użyj button{background:/*Something here*/} button:focus{-moz-box-shadow:0 0px 3px #C80;}. To rekompensuje brak przerywanej linii i zapewnia spójność przeglądarki, o której mi chodziło.
Bryan Field,
Właśnie tego potrzebowałem. Dzięki!
Abel
11
Aby naprawić to na elementach wejściowych, dodaj równieżinput[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner
Stefan
Niesamowite! Dziękuję Ci! To pomogło!
SoWeLie
1
@Stefan jsfiddle.net/LjhQ5/1 Wygląda na to, że działa poprawnie (z wyjątkiem filecss). Przepraszamy, na stronie, na której próbowałem to zrobić, musiał istnieć konflikt CSS. Dzięki.
Sparebytes
8

Aby naprawić to również na elementach wejściowych, dodaj 

input[type="reset"]::-moz-focus-inner, 
input[type="button"]::-moz-focus-inner, 
input[type="submit"]::-moz-focus-inner, 
input[type="file"] > input[type="button"]::-moz-focus-inner

jest po prostu doskonały!

Marcelo Hexsel
źródło
Czy masz wiedzę na temat zgodności tego rozwiązania z przeglądarkami?
Bryan Field
3
Czy nie jest input[type="file"] > input[type="button"]::-moz-focus-innerzbędny, ponieważ już dodałeś input[type="button"]::-moz-focus-inner, czy nie jest to twoje doświadczenie? Czy wiesz?
Bryan Field
@GeorgeBailey: kompatybilność przeglądarki to Firefox 3+, ten kod nie wpływa na żadną inną przeglądarkę.
Dan,
@GeorgeBailey Myślę, że ta odpowiedź miała być odpowiedzią na ten komentarz.
WynandB