Norme CSS : attribut d'alignement vertical_HTML/Xhtml_Production de pages Web

Texte original : http://www.mikkolee.com/13
J'ai étudié attentivement l'attribut vertical-align ces derniers jours, et le résultat m'a surpris. Cette norme CSS très "sénior" se comporte en fait différemment selon les navigateurs.
Vertical-align a beaucoup de valeurs, y compris la ligne de base 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 :
p {
taille de police : 18px;
hauteur de ligne : 36px;
famille de polices : Tahoma, sans-serif;
}
img {
 alignement vertical : bas ;
>
Ensuite, jetons un coup d'œil à l'effet de ce CSS dans différents navigateurs (j'ai fait l'image comme ça intentionnellement pour que je puisse voir clairement la position relative) :





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 sur le dessus. 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 : Lorsque la ligne de base, le haut et le bas sont utilisés, la ligne de base (ou le milieu, le haut, le bas) de l'élément est alignée avec la même position que les éléments environnants, comme le haut de l'image aligné avec le haut du texte environnant. 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. 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. 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, c'est-à-dire le centre exact de la lettre minuscule "x". Cependant, de nombreux navigateurs définissent souvent l'unité ex comme 0,5em, ce qui n'est pas nécessairement le centre exact de x (par exemple, dans l'image ci-dessus, la hauteur de x doit être de 10 px et em de 18 px, donc les deux valeurs sont différents).
Cependant, même en suivant les directives ci-dessus, cela me laisse perplexe que l'interprétation de chaque navigateur soit si différente. 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 à l'interprétation par le navigateur de la structure du texte en ligne et des images en ligne. beaucoup à voir avec ça.
Enfin, je vais vous donner une page de test, où vous pourrez voir comment chaque navigateur interprète différentes valeurs d'alignement vertical.
http://www.mikkolee.com/weblab/001_vertical/
Vous pouvez tester d'autres valeurs, telles que middle ou text-top, car chaque navigateur est complètement différent. Discutons de ce que vous pensez ~~