CSS-Standard: Vertical-Align-Attribut_HTML/Xhtml_Webseitenproduktion

Originaltext: http://www.mikkolee.com/13
Ich habe das Vertical-Align-Attribut in den letzten Tagen sorgfältig studiert und das Ergebnis hat mich überrascht. Dieser sehr „ältere“ CSS-Standard verhält sich in verschiedenen Browsern tatsächlich unterschiedlich.
Vertical-align hat viele Werte, 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:
p {
Schriftgröße: 18px;
Zeilenhöhe: 36px;
Schriftfamilie: Tahoma, serifenlos;
}
img {
vertikal ausrichten: unten ;
}
Dann werfen wir einen Blick auf die Wirkung dieses CSS in verschiedenen Browsern (ich habe das Bild absichtlich so gestaltet, damit ich die relative Position klar erkennen kann):





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 dem Seite von Firefox. Ehrlich gesagt weiß ich nicht, was los ist.
Ich habe den „CSS Definitive Guide (Second Edition)“ sorgfältig studiert und sogar W3C konsultiert und dann selbst ein Diagramm zur vertikalen Ausrichtung erstellt:

Gemäß der W3C-Definition, wenn die vertikale Ausrichtung eines Inline-Elements auf Folgendes eingestellt ist: Wenn „Grundlinie“, „oben“ und „unten“ verwendet werden, wird die Grundlinie (oder Mitte, oben, unten) des Elements an derselben Position der umgebenden Elemente ausgerichtet, z. B. der obere Rand des Bildes wird am oberen Rand des umgebenden Textes ausgerichtet. Wenn Text-Top und Text-Bottom verwendet werden, wird die Ober- (oder Unterseite) des Elements an der Text-Oberseite (oder Text-Unterseite) der umgebenden Elemente ausgerichtet. Die Länge (%, em, ex) wird basierend auf der Grundlinie nach oben verschoben, sodass positive Zahlen nach oben und negative Zahlen nach unten gehen. 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, also der genauen Mitte des Kleinbuchstabens „x“. Viele Browser definieren die Einheit ex jedoch häufig als 0,5em, was 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, verblüfft es mich, dass die Interpretation jedes Browsers so unterschiedlich ist. 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 viel damit zu tun.
Abschließend gebe ich Ihnen eine Testseite, auf der Sie sehen können, wie jeder Browser unterschiedliche Werte von Vertical-Align interpretiert.
http://www.mikkolee.com/weblab/001_vertical/
Sie können andere Werte testen, z. B. Mitte oder Text oben, da jeder Browser völlig anders ist. Lass uns besprechen, was du denkst~~