Come rendere il riempimento del pulsante Firefox rispetto? - css, google-chrome, firefox, padding

Per qualche motivo Firefox button gli elementi non sembrano rispettare i CSS padding dichiarazioni, anche se le fai display: block.

Vedi questo JSFiddle in Chrome e Firefox: http://jsfiddle.net/DgeQ6/

Nota come il padding funziona in Chrome ma non in Firefox. Come faccio a fare in modo che Firefox faccia attenzione padding in button elementi?

Ecco uno screenshot di come appare su Firefox sulla mia macchina:

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

Il padding dovrebbe essere di 20px ma non è interessato.

risposte:

4 per risposta № 1

Il credito dovrebbe essere indirizzato a Boris di seguito, ma è necessario utilizzare -moz-appearance: none per sovrascrivere lo stile dei pulsanti del livello del sistema operativo. Ecco un violino: http://jsfiddle.net/DgeQ6/8/.

HTML

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

CSS

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

Va anche notato che Twitter Bootstrap sembra avere lo stesso effetto per i pulsanti di Firefox solo avendo uno stile "border-radius" insieme al padding.


2 per risposta № 2

Il riempimento di per sé non funziona su Mac perché ilL'aspetto dei pulsanti di ricerca nativi per Mac sovrascrive il padding. Su Windows funziona bene, per esempio. Non riesco a ricordare quale sia il comportamento su Linux a mano a mano.

Il modo più sicuro per risolvere questo problema è impostare -moz-appearance: none se vuoi eliminare l'aspetto a tema nativo.


0 per risposta № 3

inserisci la descrizione dell'immagine qui

Sembra questo nel mio Firefox.


Menu