Firefox n'applique pas line-height sur des submit button (dabblet)

Bonjour,

J'ai remarqué que Firefox n'applique pas la valeur de la propriété line-height sur les éléments input de type submit. Ce comportement n'est pas répliqué par aucun autre navigateur testé.

En y regardant de plus près, il semblerait que Firefox force la valeur de line-height à "normal". Dans les styles par défaut du système, on peut y voir sur firebug que la valeur par défaut qui affecte notre élément est:

input {
    line-height: normal !important;
}

J'ai essayé d'ajouter !important pour surpasser le code du navigateur, mais rien à faire. Voici une démo minimale du problème sur dabblet:

http://dabblet.com/gist/2852420

S'âgit-il réellement d'un bug ? Si oui, connaissez-vous une manière de forcer cette propriété à se plier selon notre volonté ?

Voici la css de html5 boilerplate pour normaliser l'aspect des boutons :

/*
 * 1. Correct font-size not inheriting in all browsers
 * 2. Remove margins in FF3/4 S5 Chrome
 * 3. Define consistent vertical alignment display in all browsers
 */

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 */

button, input { line-height: normal; }

/*
 * 1. Display hand cursor for clickable form elements
 * 2. Allow styling of clickable form elements in iOS
 * 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
 */

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }

/*
 * Re-set default cursor for disabled elements
 */

button[disabled], input[disabled] { cursor: default; }

/*
 * Consistent box sizing and appearance
 */

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/*
 * Remove inner padding and border in FF3/4: h5bp.com/l
 */

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

Merci, mais cela ne répond pas réellement à la question puisque la solution proposé par HTML5 Boilerplate est d'imité le rendu par défaut de Firefox:

/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 */

button, input { line-height: normal; }

Ceci normalise le rendu par défaut entre les navigateurs, mais ne permet pas de modifier cette propriété pour qu'elle soit prise en compte par Firefox.

Hello,

De mémoire, un !important dans une feuille de styles User Agent prend le pas sur un !important dans une CSS Author. Donc ça va pas être possible.

Bonjour,

je n'ai pas testé ton problème spécifique (encore).
Perso, j'utilise beaucoup le padding vertical pour caler, après avoir fixé la bonne taille de police en em ; j'utilise aussi le reset button de Florent avec l'outline à l'extérieur (merci Florent !).

Pour ce qui est de la priorité des règles CSS en fonction de leur origine, bah y a un gros problème : il n'est pas prévu de user agent important declaration (ni de UA normal declaration donc), juste des UA declaration. Source : Cascade, CSS2.1 REC
Il ne devrait y avoir que 5 cas :
- UA declaration
- instructions de l'utilisateur
- instructions de l'auteur (le site)
- instructions avec !important de l'auteur (le site)
- instructions avec !important de l'utilisateur

(@fvsch : il y a bien une inversion mais c'est entre auteur et utilisateur. Probablement pour que l'utilisateur ait un moyen de spécifier des instructions ayant moins de poids que celles de l'auteur, sachant qu'il a de toute façon le dernier mot s'il le souhaite avec !important)

Felipe a écrit :
j'utilise aussi le reset button de Florent avec l'outline à l'extérieur

Ah oui tiens, j'ai oublié de préciser que:
- Avec un élément BUTTON (de type submit ici) on a un peu plus de liberté, moyennant quelques correctifs CSS: http://fvsch.com/code/button-css/
- J'avais ouvert un bug chez Mozilla pour le !important sur les éléments input. La réponse de Boris Zbarsky est intéressante. Bien sûr il est toujours possible de voter pour ce bug.

Merci à vous,

Je suis allé voter pour le règlement du bug également. Je trouve étrange que Boris Zbarsky parle d'ajouter un "quirk" alors que le quirk me semble plutôt être le fait d'empêcher une author stylesheet de modifier ce genre de propriété.

Je vais essayer avec l'élément button prochainement.