FAQ version Beta 0.5
Décalages, marges, bugs divers
Espaces indésirables sous les images
Il existe parfois des comportements navigateurs difficiles à comprendre et à expliquer. Celui de l'espace qui se crée en-dessous des images sur Internet Explorer en fait partie.
Il s'avère qu'il s'agit un problème avec Internet Explorer sur les balises en-ligne dont le "height" est inférieur à celui du texte courant.
En HTML, les images sont considérées comme du texte, c'est à dire qu'une image se placera par défaut sur la ligne de base du texte, comme n'importe quelle lettre.
Le problème est qu'il y a toujours un espace sous la ligne de base du texte pour laisser de la place aux lettres comme : p q g ou y
Dans un tableau ou un bloc, cet espace peut s'avérer gênant si l'image ne fait pas partie d'un texte mais occupe la totalité d'une cellule ou du bloc.
L'astuce consiste alors à ne plus considérer l'image comme un élément en-ligne qui se comporte comme du texte mais comme un Bloc à part entière. On utilise pour cela la propriété "display" :
D'autres solutions :
- font-size: 1px sur l'élément contenant l'image (la valeur "0" ne fonctionnant pas sur certains navigateurs)
- line-height: 1px sur l'élément contenant l'image
- vertical-align: middle pour modifier l'alignement par défaut de l'image.
Il s'avère qu'il s'agit un problème avec Internet Explorer sur les balises en-ligne dont le "height" est inférieur à celui du texte courant.
En HTML, les images sont considérées comme du texte, c'est à dire qu'une image se placera par défaut sur la ligne de base du texte, comme n'importe quelle lettre.
Le problème est qu'il y a toujours un espace sous la ligne de base du texte pour laisser de la place aux lettres comme : p q g ou y
Dans un tableau ou un bloc, cet espace peut s'avérer gênant si l'image ne fait pas partie d'un texte mais occupe la totalité d'une cellule ou du bloc.
L'astuce consiste alors à ne plus considérer l'image comme un élément en-ligne qui se comporte comme du texte mais comme un Bloc à part entière. On utilise pour cela la propriété "display" :
img {
display: block;
}
display: block;
}
D'autres solutions :
- font-size: 1px sur l'élément contenant l'image (la valeur "0" ne fonctionnant pas sur certains navigateurs)
- line-height: 1px sur l'élément contenant l'image
- vertical-align: middle pour modifier l'alignement par défaut de l'image.
Liens complémentaires