Texte d'origine: http://www.mikkolee.com/13
J'ai soigneusement étudié l'attribut d'alignement vertical ces derniers jours, et le résultat m'a surpris. Cette norme CSS très expérimentée fonctionne en fait différemment dans chaque navigateur.
Il y a beaucoup de valeurs pour l'alignement vertical, y compris la ligne de base sous-top top à bas de texte à fond et diverses valeurs de longueur (%, em, ex, etc.). Permettez-moi de vous montrer l'une des valeurs les plus exagérées que je pense: en bas. Le code est le suivant:
p {
taille de police: 18px;
hauteur de ligne: 36px;
Font-Family: Tahoma, Sans-Serif;
}
img {
Aligne verticale: en bas;
}
Voyons ensuite l'effet de ce CSS dans divers navigateurs (l'image est faite exprès, afin que je puisse voir clairement la position relative):
Eh bien, ce résultat est en fait très incroyable. Généralement, je pense que Firefox l'expliquera plus correctement que IE, mais après avoir regardé Opera, j'ai trouvé que c'était la même chose que c'est-à-dire, tandis que Safari / Win est du côté de Firefox. Pour être honnête, je ne sais pas ce qui se passe.
J'ai soigneusement étudié le "Guide CSS faisant autorité (deuxième édition)" et même cherché le W3C, puis j'ai fait une image sur la verticale-alignement par moi-même:
Selon W3C, lorsque l'alignement vertical d'un élément en ligne est défini sur: la ligne de base, le haut, le bas, la ligne de base (ou le milieu, le haut, le bas) de l'élément est la même position que les éléments environnants, tels que le haut de l'image et le haut du texte environnant. Lorsque le texte du texte et le bas-fond sont du texte (ou du bas) de l'élément aligne le top-top (ou le bas-fond) de l'élément environnant. Lorsque la longueur (%, EM, Ex), il monte en fonction de la ligne de base, donc les nombres positifs augmentent et les nombres négatifs baissent. Lorsque le milieu, le centre de l'élément est aligné avec le centre de l'élément environnant. La définition du centre ici est: l'image est bien sûr la moitié de la hauteur, et le texte doit être remonté de 0,5ex basé sur la ligne de base, c'est-à-dire le centre de la lettre minuscule x . Cependant, de nombreux navigateurs définissent souvent l'unité d'EX comme 0.5EM, il n'est donc pas nécessairement le centre de X (par exemple, la hauteur de X doit être de 10px, tandis que EM est 18px, donc les deux valeurs sont différentes).
Cependant, même selon les directives ci-dessus, il est incroyable que les explications de chaque navigateur soient si différentes. Je suis trop paresseux pour étudier pourquoi c'est le cas. En général, ils doivent avoir des définitions différentes de la position de chaque ligne dans la police, donc ce problème est non seulement lié à l'alignement vertical, mais aussi à l'explication par le navigateur de la structure du texte en ligne et des images en ligne.
Enfin, je vais vous donner une page de test, et vous pouvez jeter un œil aux explications des différentes valeurs de l'alignement vertical par chaque navigateur.
http://www.mikkolee.com/weblab/001_vertical/
Vous pouvez tester d'autres valeurs, telles que le milieu ou le texte du texte, qui sont complètement différentes de chaque navigateur. Si vous avez une expérience, veuillez en discuter ~~