Détail du bug css de la css : line-height


Explication de la gestion des bugs css


Définition


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 de bugs css "non vérifiés", ils sont soit sur des navigateurs MAC soit sur un navigateur que je ne possède pas.
Ceux que j'ai pu visualiser sont notés
Bug vérifié : oui

Bug n°1

Bug 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
Exemple de code :
.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 (%)



Reporter un bug ou problème d'interprétationavec la propriété line-height