Jak ustawić przycisk Firefox pod kątem? - css, google-chrome, firefox, padding

Z jakiegoś powodu Firefox button elementy nie wydają się szanować CSS padding deklaracje, nawet jeśli je złożysz display: block.

Zobacz ten JSFiddle w przeglądarce Chrome i Firefox: http://jsfiddle.net/DgeQ6/

Zauważ, jak dopełnienie działa w Chrome, ale nie w Firefoksie. Jak sprawić, by Firefox zwrócił na to uwagę padding w button elementy?

Oto zrzut ekranu przedstawiający wygląd Firefoksa na moim komputerze:

https://www.evernote.com/shard/s217/sh/dc349236-9a7e-46f2-ae77-3a7581fa78c1/ea90d1f4a880ba64257fdd744b9fabcf

Wypełnienie powinno wynosić 20 pikseli, ale nie ma na nie wpływu.

Odpowiedzi:

4 dla odpowiedzi № 1

Kredyt powinien trafić do Borisa poniżej, ale musisz użyć opcji -moz-appearance: none, aby zastąpić stylami przycisków na poziomie OS. Oto skrzypce: http://jsfiddle.net/DgeQ6/8/.

HTML

<button class="btn-large">Hello</button>

CSS

.btn-large {
padding: 100px;
-moz-appearance: none;
}

Należy również zauważyć, że Twitter Bootstrap wydaje się osiągać ten sam efekt dla swoich przycisków w Firefoksie, po prostu mając styl "border-radius" wraz z dopełnieniem.


2 dla odpowiedzi nr 2

Samo wyściełanie nie działa na Macu, ponieważPrzyciski wyglądające w stylu macierzystym Maca zastępują dopełnienie. W systemie Windows działa na przykład dobrze. Nie potrafię sobie przypomnieć, co to jest zachowanie w Linuksie.

Najbezpieczniejszym sposobem radzenia sobie z tym jest ustawienie -moz-appearance: none jeśli chcesz rzucić okiem na temat natywności.


0 dla odpowiedzi № 3

wprowadź opis obrazu tutaj

Wygląda to tak w moim firefoxie.


Powiązane pytania
Menu