Comment faire pour que le bouton Firefox respecte le remplissage? - css, google-chrome, firefox, remplissage

Pour une raison quelconque, Firefox button les éléments ne semblent pas respecter le CSS padding déclarations, même si vous les faites display: block.

Voir ce JSFiddle dans Chrome et Firefox: http://jsfiddle.net/DgeQ6/

Remarquez comment le rembourrage fonctionne dans Chrome mais pas dans Firefox. Comment puis-je faire attention à Firefox? padding dans button éléments?

Voici une capture d'écran de l'apparence de Firefox sur ma machine:

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

Le rembourrage devrait être 20px mais il n'est pas affecté.

Réponses:

4 pour la réponse № 1

Le crédit devrait aller à Boris ci-dessous mais vous devez utiliser -moz-appearance: none pour remplacer les styles de bouton de niveau OS. Voici un violon: http://jsfiddle.net/DgeQ6/8/.

HTML

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

CSS

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

Il convient également de noter que Twitter Bootstrap semble atteindre le même effet pour leurs boutons dans Firefox juste en ayant un style "border-radius" avec rembourrage.


2 pour la réponse № 2

Rembourrage par lui-même ne fonctionne pas sur Mac parce que leLa recherche de boutons sur le thème natif Mac remplace le rembourrage. Sur Windows, cela fonctionne très bien, par exemple. Je ne peux pas me rappeler ce que le comportement est sur Linux.

Le moyen le plus sûr de gérer cela est de définir -moz-appearance: none si vous voulez laisser tomber le look sur le thème natif.


0 pour la réponse № 3

entrez la description de l'image ici

Cela ressemble à ceci dans mon firefox.


questions connexes
Menu