Originaltext: http://www.mikkolee.com/13
Ich habe das vertikalische Attribut in den letzten Tagen sorgfältig untersucht, und das Ergebnis hat mich überrascht. Dieser sehr erfahrene CSS -Standard funktioniert in jedem Browser tatsächlich unterschiedlich.
Es gibt viele Werte für vertikale Ausrichtung, einschließlich Basis-Sub-Top-Text-Top-Text-Bottom-Mitte und verschiedenen Längenwerten (%, EM, Ex usw.). Lassen Sie mich Ihnen einen der übertriebensten Werte zeigen, die ich denke: unten. Der Code ist wie folgt:
P {
Schriftgröße: 18px;
Zeilenhöhe: 36px;
Schriftfamilie: Tahoma, Sans-Serif;
}
img {
vertikaler Align: unten;
}
Schauen wir uns dann den Effekt dieses CSS in verschiedenen Browsern an (das Bild wird absichtlich gemacht, damit ich die relative Position deutlich sehen kann):
Nun, dieses Ergebnis ist eigentlich sehr unglaublich. Im Allgemeinen denke ich, dass Firefox es korrekter erklären wird als der IE, aber nachdem ich die Oper angesehen habe, stellte ich fest, dass es dasselbe wie der IE ist, während Safari/Win auf Firefoxs Seite ist. Um ehrlich zu sein, weiß ich nicht, was los ist.
Ich studierte sorgfältig den "maßgeblichen CSS-Leitfaden (zweite Ausgabe)" und schaute sogar mit W3C nach und machte dann ein Bild über vertikale Ausrichtung alleine:
Laut W3C ist die vertikale Ausrichtung eines Inline-Elements auf: Baseline, oben, unten, die Grundlinie (oder Mitte, Oberseite, unten) des Elements dieselbe Position wie die umgebenden Elemente wie die Oberseite des Bildes und die Oberseite des umgebenden Textes. Wenn Texttop und Text-Bottom Texttop (oder unten) des Elements sind, richten Sie die Texttope (oder einen Textboden) des umgebenden Elements aus. Bei Länge (%, EM, Ex) bewegt sich sie basierend auf der Basislinie, sodass positive Zahlen steigen und negative Zahlen sinken. In der Mitte ist die Mitte des Elements mit der Mitte des umgebenden Elements ausgerichtet. Die Definition des Zentrums hier ist: Das Bild ist natürlich die halbe Höhe, und der Text sollte auf der Grundlage der Basislinie, dh der Mitte des Kleinbuchstabenbuchs X , um 0,5EX bewegt werden. Viele Browser definieren jedoch häufig die Einheit von Ex als 0,5 -EM, so dass es nicht unbedingt das Zentrum von x ist (als Beispiel sollte die Höhe von x 10px sein, während EM 18px ist, sodass die beiden Werte unterschiedlich sind).
Selbst nach den oben genannten Richtlinien ist es unglaublich, dass die Erklärungen jedes Browsers so unterschiedlich sind. Ich bin zu faul, um zu studieren, warum dies der Fall ist. Im Allgemeinen sollten sie unterschiedliche Definitionen der Position jeder Zeile in der Schriftart haben, sodass dieses Problem nicht nur mit vertikaler Ausrichtung, sondern auch mit der Erklärung des Browsers für die Struktur von Inline-Text- und Inline-Bildern zusammenhängt.
Schließlich werde ich Ihnen eine Testseite geben und Sie können sich die Erklärungen verschiedener Werte der vertikalen Ausrichtung durch jeden Browser ansehen.
http://www.mikkolee.com/weblab/001_vertical/
Sie können andere Werte testen, wie z. B. Mittel- oder Texttop, die sich vollständig von jedem Browser unterscheiden. Wenn Sie Erfahrung haben, besprechen Sie es bitte ~~