Explication de la gestion des bugs line-height CSS
Définition bug line-height CSS
Vous trouverez ci-dessous divers bugs d'interprétation de la CSS line-height.
Ces bugs ont été transmis par les internautes du site.
J'ai vérifié certains bugs mais pour la plupart des bugs CSS "non vérifiés", c'est que je ne possède pas le navigateur sur lequel a été détecté le bug.
Ceux que j'ai pu visualiser sont notés :
Bug vérifié : oui.
Bug line-height CSS n° 1
Bug line-height mis par Dmc
Système d'exploitation : windows xp
Navigateur : Internet Explorer 6
Bug vérifié : oui
Problème avec line-height:
Sous Internet Explorer 6 le line-height disparaît si il y a un élément de formulaire de type input ou select. Le phénomène semble être présent sur Opéra.
Ce bug n'existe pas sous Internet Explorer 7.
Solution du problème par DMC :
J'ai trouvé un bidouille qui consiste à mettre aux élément de formulaire une marge haute et basse.
Il faut faire un calcul savant MargeHaute = MargeBasse = ((LineHeight-AuteurElement)/2)-1.
Par exemple pour une line-height de 100px, pour un champ texte (input type="text")
MargeHaute = ((100-22)/2)-1= 38px.MonChamp{
margin: 14px 0;
ertical-align: middle;
}
Hauteur des éléments par défaut sous Internet Explorer 6 des divers éléments de formulaire :
- select, taille de 22px, 16pt, 1.4em, 140%.
- input type="text", taille de 22px, 16pt, 1.4em, 140%.
- input type="buton", taille de 24px, 18pt, 1.5em, 150%.
- input type="submit", taille de 24px, 18pt, 1.5em, 150%.
- input type="reset", taille de 24px, 18pt, 1.5em, 150%.
- input type="radio", taille de 18px, 13.5pt, 1.125em 112.5%.
- input type="checkbox", taille de 18px, 13.5pt, 1.125em 112.5%.
Pour les unités relatives (valeurs approximatives) je me base sur une valeur par défaut de font-size égale medium.
Table de correspondances em px pt pourcentage (%)