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

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

— Bryan Field
źródło

Dlaczego dodałeś margin: -1px? Czy to jest w jakiś sposób połączone border: 2px?

— Dan

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,

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

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

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

@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

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

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