10 astuces CSS : correction

En ragardant sous IE Win l'exemple de code CSS concernant le point 8. Aligner verticalement avec CSS des 10 astuces CSS, j'ai réalisé que ça ne fonctionnait pas. Je pense avoir trouvé la source du problème. Voila mon ancien code :

#box {
	width: 250px;
	height: 24px;
	line-height: 24px;
	margin: 0;
	padding: 10px;
	color: fuchsia;
	font: bold 12px verdana;
	border: solid;
}

Dans le bout de code ci-dessus j'utilise la propriété raccourcie font sans déclarer toutes les valeurs. Voici la syntaxe complète de la propriété raccourcie font (j'utilise ¬ pour indiquer un retour à la ligne qui n'existe pas dans la réalité, vous me suivez ?) :

style {
font : font-style, font-variant, font-weight,¬
	font-size/line-height, font-family;
}

Dans mon exemple, je déclare font: bold 12px verdana; sans spécifier de valeur pour line-height, puisque je l'ai déclaré un petit peu au-dessus.

Je pense que quand IE Win interprète la feuille de style, il prend bien en compte la première déclaration de line-height, puis il arrive à la propriété raccourcie font et comme il n'y trouve pas de valeur déclarée pour line-height, il lui affecte sa valeur par défaut soit normal. Et cette valeur a la priorité puisqu'elle est attribuée en dernier. En conséquence si le code reste tel quel, ça ne risque pas de fonctionner.

QCU : 3 façon de pallier à ce problème, laquelle choisiriez-vous ?

1. On déclare line-height après la propriété raccourcie font
2. On donne une valeur à line-height dans la propriété raccourcie font et on supprime la propriété line-height déclarée avant
3. On n'utilise pas la propriété raccourcie font

Si vous avez choisi la solution 2, vous avez fait le même choix que moi, on peut aller boire des bières ensemble ;-) Le code devient :

#box {
	width: 250px;
	height: 24px;
	margin: 0;
	padding: 10px;
	color: fuchsia;
	font: bold 12px/24px verdana;
	border: solid;
}

Et là ça fonctionne, c'est de la bombe de code© !