Detaillierte Analyse des Vertical-Align-Attributs

Detaillierte Analyse des Vertical-Align-Attributs. Das Ergebnis hat mich überrascht. Dieser sehr „ältere“ CSS-Standard verhält sich in verschiedenen Browsern tatsächlich unterschiedlich.
Es gibt viele Werte für die vertikale Ausrichtung, einschließlich Baseline Sub Supper Top Text-Top Bottom Text-Bottom Middle und verschiedene Längenwerte (%, em, ex usw.). Lassen Sie mich Ihnen zunächst einen Wert zeigen, der meiner Meinung nach am meisten übertrieben ist: den Boden. Der Code lautet wie folgt:


Schauen Sie sich dann die Wirkung dieses CSS in verschiedenen Browsern an (das Bild ist bewusst so gemacht, damit die relative Position klar erkennbar ist):


Nun, dieses Ergebnis ist tatsächlich sehr überraschend, ich würde denken, dass Firefox es korrekter erklären würde als IE, aber nachdem ich mir Opera angesehen hatte, stellte ich fest, dass es dasselbe ist wie IE, während Safari/Win auf der Seite von Firefox steht . Ehrlich gesagt weiß ich nicht, was los ist.
Ich habe den „CSS Definitive Guide (Second Edition)“ sorgfältig studiert, sogar das W3C konsultiert und dann selbst ein Diagramm zur vertikalen Ausrichtung erstellt:


Gemäß der W3C-Definition gilt Folgendes, wenn die vertikale Ausrichtung eines Inline-Elements auf Folgendes eingestellt ist:

1. Bei Verwendung von Grundlinie, Oben und Unten wird die Grundlinie (oder Mitte, Oben, Unten) des Elements an derselben Position der umgebenden Elemente ausgerichtet, z. B. am oberen Rand des Bildes und am oberen Rand des umgebenden Textes.
2. Wenn Text-Top und Text-Bottom verwendet werden, wird die Oberseite (oder Unterseite) des Elements an der Text-Oberseite (oder Text-Unterseite) der umgebenden Elemente ausgerichtet.
3. Die Länge (%, em, ex) wird basierend auf der Grundlinie nach oben verschoben, sodass positive Zahlen nach oben und negative Zahlen nach unten gehen.
4. In der Mitte ist die Mitte des Elements an der Mitte der umgebenden Elemente ausgerichtet. Die Definition von „Mitte“ lautet hier: Das Bild ist natürlich halb so hoch und der Text sollte basierend auf der Grundlinie, die genau die Mitte des Kleinbuchstabens „x“ ist, um 0,5x nach oben verschoben werden. Viele Browser definieren die Einheit von ex jedoch häufig als 0,5em, sodass es nicht unbedingt die genaue Mitte von x ist (im obigen Bild sollte die Höhe von x beispielsweise 10 Pixel betragen und em 18 Pixel, also die beiden Werte sind unterschiedlich).

Aber selbst wenn ich die oben genannten Richtlinien befolge, ist es mir ein Rätsel, dass Browser die Dinge so unterschiedlich interpretieren. Ich bin zu faul, um zu recherchieren, warum das so ist. Im Allgemeinen sollten sie unterschiedliche Definitionen der Position jeder Zeile der Schriftart haben, sodass dieses Problem nicht nur mit der vertikalen Ausrichtung zusammenhängt, sondern auch mit der Interpretation der Struktur von Inline-Text und Inline-Bildern durch den Browser hat viel damit zu tun.