Problème de hauteur de ligne de Firefox avec les champs de saisie

Question

J'ai réalisé que le problème avant, mais je suppose que ça n'a pas d'importance car tout comme il le fait maintenant.

Ce que j'ai découvert est que Firefox a un défaut hauteur de la ligne de la valeur de 1.2 pour les champs de saisie qui ne peut pas être changé. Au moins dans OSX, Windows n'est pas installé donc je ne peux pas confirmer s'il en existe.

J'ai fait quelques tests et des tests, et il n'y a simplement aucun moyen de modifier la valeur par défaut hauteur de la ligne de la valeur de Firefox. Tous les autres navigateurs (ok, j'ai essayé avec Chrome et Safari) obéir à ma valeur parfaitement bien, mais pas Firefox.

Quelqu'un a déjà remarqué cela et si oui, avez-vous trouvé une solution pour surmonter cela?

Answer 1

Malheureusement, la hauteur de ligne est définie sur! Important dans le CSS de base de Firefox ... http://hg.mozilla.org/mozilla-central/rev/b97aef275b5e

Answer 2

Je stylise toujours mes boutons par rapport aux ancres, boutons, étiquettes et soumissions pour m'assurer que quel que soit l'élément utilisé, le résultat est exactement le même.

Étant donné que Firefox insiste sur l'utilisation de !important pour déclarer line-height , la seule façon de surmonter calmement ce problème est de forcer tous les autres fournisseurs à utiliser line-height: normal pour les boutons, et puis utilisez le remplissage pour centrer verticalement le texte:

 
/**
 * Consistently style buttons on anchors, buttons, labels, and submits
 */
.btn {
    .
    .
    .
    height: auto;        // ensure heights on inputs do not affect submit buttons
    line-height: normal; // all browsers use FF's ever unchanging value
    padding: .5em 1em;   // vertically center the text in the button
    .
    .
    .
}
 

Cela fonctionne de manière similaire pour les entrées.

Answer 3

Pour autant que je sache par expérience, la hauteur de ligne sur l'entrée ne changera pas à moins que vous ne changiez la taille de la police - que la hauteur de ligne changera pour être la même que la taille de la police + 4 px (2 bots supérieurs 2 je suppose) .

Dans le cas où cela vous dérange avec le style, vous pouvez utiliser le rembourrage supérieur et inférieur pour obtenir un effet de hauteur de ligne plus grand et faux.

Answer 4

Si vos boutons d'entrée et de soumission sont côte à côte, avec le bouton enfoncé environ 1px plus bas que l'entrée (il semble que votre image d'arrière-plan soit désactivée), un simple:

 display:inline-block;
vertical-align: top;
 

sur le bouton l'aligne parfaitement dans FF & IE.

Answer 5

Utilisez Height au lieu de Line-Height . Cela fonctionne pour moi dans presque tous les navigateurs sous Windows7, mais je ne l'ai pas testé sur OSX.