Analyse détaillée de l'attribut vertical-align.Ces derniers jours, j'ai étudié attentivement l'attribut vertical-align. Le résultat m'a surpris. Ce standard CSS très "sénior" se comporte en fait différemment selon les navigateurs.
Il existe de nombreuses valeurs pour l'alignement vertical, y compris la ligne de base du sous-supper top text-top bottom text-bottom middle et diverses valeurs de longueur (%, em, ex, etc.). Laissez-moi d'abord vous montrer une valeur qui me semble la plus exagérée : le bas. Le code est le suivant :
Exemple de code source
[www.52css.com] p{
taille de police : 18 px ;
hauteur de ligne : 36 px ;
famille de polices : Tahoma, sans empattement ;
}
img {
alignement vertical : bas ;
}
Jetez ensuite un œil à l'effet de ce CSS dans différents navigateurs (l'image est délibérément faite comme ça, afin que la position relative soit clairement visible) :
Eh bien, ce résultat est en fait très surprenant. En général, je pense que Firefox l'expliquerait plus correctement qu'IE, mais après avoir regardé Opera, j'ai trouvé que c'est la même chose qu'IE, alors que Safari/Win est du côté de Firefox. . Pour être honnête, je ne sais pas ce qui se passe.
J'ai étudié attentivement le "CSS Definitive Guide (Second Edition)", et j'ai même consulté le W3C, puis j'ai réalisé moi-même un schéma sur l'alignement vertical :
Selon la définition du W3C, lorsque l'alignement vertical d'un élément en ligne est défini sur :
1. Lorsque vous utilisez la ligne de base, le haut et le bas, la ligne de base (ou le milieu, le haut, le bas) de l'élément est alignée avec la même position des éléments environnants, tels que le haut de l'image et le haut du texte environnant.
2. Lorsque text-top et text-bottom sont utilisés, le haut (ou le bas) de l'élément est aligné avec le texte en haut (ou le texte en bas) des éléments environnants.
3. La longueur (%, em, ex) est déplacée vers le haut en fonction de la ligne de base, donc les nombres positifs augmentent et les nombres négatifs diminuent.
4. Au milieu, le centre de l’élément est aligné avec le centre des éléments environnants. La définition du "centre" ici est la suivante : l'image fait bien sûr la moitié de la hauteur et le texte doit être déplacé vers le haut de 0,5ex en fonction de la ligne de base, qui est le centre exact de la lettre minuscule "x". Cependant, de nombreux navigateurs définissent souvent l'unité de ex comme 0,5em, de sorte qu'il ne s'agit pas nécessairement du centre exact de x (par exemple, dans l'image ci-dessus, la hauteur de x doit être de 10 px et celle de em de 18 px, donc les deux les valeurs sont différentes).
Cependant, même en suivant les directives ci-dessus, je suis stupéfait que les navigateurs interprètent les choses si différemment. Je suis trop paresseux pour rechercher pourquoi c'est le cas. D'une manière générale, il devrait y avoir des définitions différentes de la position de chaque ligne de la police, donc ce problème n'est pas seulement lié à l'alignement vertical, mais aussi à l'interprétation par le navigateur de la structure du texte en ligne et des images en ligne. a beaucoup à voir avec ça.
