par
Victor BRITO » 21 avr. 2009, 22:47
En gros, si tu as un petit texte dans un div
et que tu fixes une hauteur à ce div
Eh bien, lorsque tu agrandis la taille de police sous IE (ou sous Safari), le texte déborde de son élément et, vu que je l'ai coloré en blanc en CSS, il risque d'être en partie invisible si le blanc est la couleur du fond qui entoure le div en question.
Afin que le div puisse s'étirer quand on agrandit la taille de police, deux solutions sont envisageables :
- tu ne fixes aucune hauteur au div (autrement dit, tu supprimes la ligne height: 20px de ta règle CSS) et le div aura une hauteur s'adaptant automatiquement au contenu (pour rappel, la propriété height a une valeur par défaut, qui est auto),
- si une hauteur doit être spécifiée, il faut que ce soit une hauteur minimale (autrement dit, tu remplaces height par min-height).
Pour IE 6, qui ignore min-height, mais interprète height comme si c'était min-height (ce qui n'est pas un comportement conforme au standard CSS), une feuille de style supplémentaire appelée au moyen d'un
commentaire conditionnel apportera le correctif nécessaire.
Code : Tout sélectionner
/* Feuille de style à part pour IE 6 seulement */
div {
height: 20px;
/* Dans le cas d'IE 6, la propriété height peut être utilisée
pour la raison donnée ci-dessus */
}
Pour résumer, il y a, en CSS, trois propriétés gérant la hauteur :
- min-height, indiquant une hauteur minimale (valeur par défaut : 0) : si le contenu dépasse cette hauteur minimale, la hauteur réelle du bloc s'adapte au contenu, qui ne déborde donc pas ;
- max-height, indiquant une hauteur maximale (valeur par défaut : none) : si le contenu dépasse cette hauteur maximale, il déborde ;
- height, indiquant une hauteur fixe (valeur par défaut : auto) : si le contenu dépasse cette hauteur, il déborde ;
Ai-je été plus clair, à présent ?
En gros, si tu as un petit texte dans un div
[code]<div>ton court texte</div>[/code]
et que tu fixes une hauteur à ce div
[code]div {
color: white;
background: black;
height: 20px;
}[/code]
Eh bien, lorsque tu agrandis la taille de police sous IE (ou sous Safari), le texte déborde de son élément et, vu que je l'ai coloré en blanc en CSS, il risque d'être en partie invisible si le blanc est la couleur du fond qui entoure le div en question.
Afin que le div puisse s'étirer quand on agrandit la taille de police, deux solutions sont envisageables :
[list=1][*]tu ne fixes aucune hauteur au div (autrement dit, tu supprimes la ligne height: 20px de ta règle CSS) et le div aura une hauteur s'adaptant automatiquement au contenu (pour rappel, la propriété height a une valeur par défaut, qui est auto),
[*]si une hauteur doit être spécifiée, il faut que ce soit une hauteur minimale (autrement dit, tu remplaces height par min-height).[/list]
[code]div {
color: white;
background: black;
min-height: 20px;
}[/code]
Pour IE 6, qui ignore min-height, mais interprète height comme si c'était min-height (ce qui n'est pas un comportement conforme au standard CSS), une feuille de style supplémentaire appelée au moyen d'un [url=http://www.blog-and-blues.org/articles/Les_syntaxes_de_commentaires_conditionnels_pour_IE_Windows]commentaire conditionnel[/url] apportera le correctif nécessaire.
[code]/* Feuille de style à part pour IE 6 seulement */
div {
height: 20px;
/* Dans le cas d'IE 6, la propriété height peut être utilisée
pour la raison donnée ci-dessus */
}[/code]
Pour résumer, il y a, en CSS, trois propriétés gérant la hauteur :
[list=1][*][b]min-height[/b], indiquant une [i]hauteur minimale[/i] (valeur par défaut : 0) : si le contenu dépasse cette hauteur minimale, la hauteur réelle du bloc s'adapte au contenu, qui ne déborde donc pas ;
[*][b]max-height[/b], indiquant une [i]hauteur maximale[/i] (valeur par défaut : none) : si le contenu dépasse cette hauteur maximale, il déborde ;
[*][b]height[/b], indiquant une [i]hauteur fixe[/i] (valeur par défaut : auto) : si le contenu dépasse cette hauteur, il déborde ;[/list]
Ai-je été plus clair, à présent ? ;)
