Wie man die Firefox-Schaltfläche respektieren Padding machen? - CSS, Google-Chrome, Firefox, Padding

Aus irgendeinem Grund Firefox button Elemente scheinen das CSS nicht zu respektieren padding Erklärungen, auch wenn Sie sie machen display: block.

Sehen Sie sich dieses JSFiddle in Chrome und Firefox an: http://jsfiddle.net/DgeQ6/

Beachten Sie, dass die Auffüllung in Chrome funktioniert, nicht jedoch in Firefox. Wie kann ich auf Firefox achten? padding im button Elemente?

Hier ist ein Screenshot, wie es in Firefox auf meinem Rechner aussieht:

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

Das Padding sollte 20px sein, aber es ist nicht betroffen.

Antworten:

4 für die Antwort № 1

Das Guthaben sollte unten an Boris gehen, aber Sie müssen -moz-appearance: none verwenden, um die Schaltflächen auf der OS-Ebene zu überschreiben. Hier ist eine Geige: http://jsfiddle.net/DgeQ6/8/.

HTML

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

CSS

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

Es sollte auch angemerkt werden, dass Twitter Bootstrap den gleichen Effekt für ihre Buttons in Firefox zu erzielen scheint, nur durch einen "Border-Radius" -Stil zusammen mit Padding.


2 für die Antwort № 2

Padding allein funktioniert nicht auf Mac, weil dieDer native Mac-Look für Schaltflächen überschreibt das Padding. Unter Windows funktioniert es zum Beispiel gut. Ich kann mich nicht erinnern, was das Verhalten auf Linux ist.

Der sicherste Weg, um damit fertig zu werden, ist das Einstellen -moz-appearance: none Wenn Sie den nativen Look ablehnen möchten.


0 für die Antwort № 3

Bildbeschreibung hier eingeben

Es sieht so aus in meinem Firefox.


Speisekarte