CSS-Standard: Eigenschaft „vertical-align“

<br />Originaltext: http://www.mikkolee.com/13
Ich habe die Eigenschaft „Vertical-Align“ in den letzten Tagen eingehend untersucht und war von den Ergebnissen überrascht. Dieser sehr „ältere“ CSS-Standard verhält sich in verschiedenen Browsern tatsächlich unterschiedlich.
Für die vertikale Ausrichtung gibt es eine ganze Reihe von Werten, darunter „Grundlinie unten“, „Abend oben“, „Text oben unten“, „Text unten unten“ in der Mitte und verschiedene Längenwerte (%, em, ex usw.). Lassen Sie mich Ihnen zunächst einen Wert zeigen, der meiner Meinung nach am übertriebensten ist: unten. Der Code lautet wie folgt:
P {
Schriftgröße: 18px;
Zeilenhöhe: 36px;
Schriftfamilie: Tahoma, serifenlos;
}
img {
vertikale Ausrichtung: unten;
}
Schauen wir uns dann die Wirkung dieses CSS in verschiedenen Browsern an (ich habe das Bild absichtlich so gemacht, damit man die relative Position deutlich erkennen kann):

Nun, dieses Ergebnis ist eigentlich ziemlich seltsam. Normalerweise würde ich denken, dass Firefox es korrekter interpretiert als IE, aber nachdem ich mir Opera angesehen habe, stellte ich fest, dass es dasselbe wie IE ist, während Safari/Win auf der Seite von Firefox steht. Ehrlich gesagt, ich habe keine Ahnung, was los ist.
Ich habe den CSS Definitive Guide (zweite Ausgabe) sorgfältig studiert, sogar das W3C konsultiert und dann ein Diagramm zur vertikalen Ausrichtung erstellt:

Gemäß der Definition des W3C wird, wenn die vertikale Ausrichtung eines Inline-Elements auf „Grundlinie, oben, unten“ eingestellt ist, die Grundlinie (oder Mitte, oben, unten) des Elements an der gleichen Position der umgebenden Elemente ausgerichtet, beispielsweise der Oberseite eines Bildes und der Oberseite des umgebenden Textes. Bei der Verwendung von Text-Top und Text-Bottom wird die Ober- (bzw. Unterseite) des Elements an der Text-Oberseite (bzw. Text-Unterseite) der umgebenden Elemente ausgerichtet. Bei der Berechnung der Länge (%, em, ex) erfolgt eine Aufwärtsbewegung ausgehend von der Grundlinie, das heißt, positive Zahlen steigen nach oben und negative Zahlen sinken. In der Mitte ist die Mitte des Elements auf die Mitte der umgebenden Elemente ausgerichtet. Die Definition von „Mitte“ lautet hier: Das Bild hat natürlich die halbe Höhe, und der Text sollte 0,5 Grad über der Grundlinie stehen, also in der Mitte des kleinen „x“ . Allerdings definieren viele Browser die Einheit von ex oft als 0,5em, sodass es nicht unbedingt die genaue Mitte von x sein muss (am Beispiel des obigen Bildes sollte die Höhe von x 10px betragen, während em 18px beträgt, also sind die beiden Werte unterschiedlich).
Doch selbst wenn ich die oben genannten Richtlinien befolge, ist es mir immer noch ein Rätsel, warum jeder Browser es so unterschiedlich interpretiert. Ich bin zu faul, nachzuforschen, warum das so ist. Im Allgemeinen dürfte die Definition der Position jeder Schriftzeile leicht unterschiedlich sein, sodass dieses Problem nicht nur mit der vertikalen Ausrichtung zusammenhängt, sondern auch stark mit der Interpretation der Struktur von Inline-Text und Inline-Bildern durch den Browser zu tun hat.
Abschließend noch eine Testseite für Sie, damit Sie sehen können, wie verschiedene Browser unterschiedliche Werte von „vertical-align“ interpretieren.
http://www.mikkolee.com/weblab/001_vertical/
Sie können andere Werte testen, beispielsweise „Mitte“ oder „Text oben“, die in verschiedenen Browsern ebenfalls völlig unterschiedlich sind. Lassen Sie uns besprechen, was Sie denken ~

<<: Warum der Befehl „explain“ MySQL-Daten ändern kann

>>: Verstehen Sie JavaScript-Prototypen und Prototypenketten gründlich

Lösung für das Problem, dass der Text unten links steht und bei der Gestaltung des Textbereichs nicht in der Größe geändert werden kann

Zwei kleine Probleme, die mich aber lange Zeit ges...

CSS-Standard: Eigenschaft „vertical-align“

Typische Fälle von MySQL-Indexfehlern

Detaillierte Erläuterung der Konzepte, Prinzipien und allgemeinen Verwendung von gespeicherten MySQL-Prozeduren

Detaillierte Erläuterung gängiger Methoden von JavaScript Array

Analyse und Beschreibung von Netzwerkkonfigurationsdateien unter Ubuntu-System

So verwalten Sie MySQL-Indizes und Datentabellen

So implementieren Sie die Ajax-Kontrolle gleichzeitiger Anforderungen basierend auf JS

Zusammenfassung der Binlog-Nutzung der MySQL-Datenbank (unbedingt lesen)

Detaillierte Erklärung zur Verwendung des MySQL-Parameters sql_safe_updates in der Produktionsumgebung

Webdesign: Die genaue Platzierung und Verwendung massiver Materialien

Beispielcode zur Implementierung mobiler Expansions- und Collapse-Effekte mit reinem CSS3

Artikel empfehlen

Detaillierte Analyse des Linux-Kernel-Makros container_of

Analyse und Lösung eines Fehlalarmproblems bei der langsamen MySQL-Protokollüberwachung

Ausrichtungsproblem zwischen Eingabetextfeld und Bildbestätigungscode (Bild ist immer einen Kopf höher als die Eingabe)

Detailliertes Installationstutorial für Zabbix 4.04 (basierend auf CentOS 7.6)

Praktische Lösung für die Bereitstellung von Prometheus-Containern

Einige CSS-Fragen, die Ihnen während eines Vorstellungsgesprächs gestellt werden könnten

Lösung für das Problem, dass der Text unten links steht und bei der Gestaltung des Textbereichs nicht in der Größe geändert werden kann

Detaillierte Erklärung einiger häufig verwendeter Schriftgrößen, Schrifteinheiten und Zeilenhöhen in CSS

Verwenden von JS zum Implementieren eines einfachen Rechners

So handhaben Sie den Token-Ablauf in WeChat-Miniprogrammen

Detaillierte Erläuterung der Lösung zum reibungslosen Upgrade der Nginx-Version

So konfigurieren Sie SSH/SFTP und legen Berechtigungen unter dem Linux-Betriebssystem fest

Beschreiben Sie kurz den Unterschied zwischen Redis und MySQL

Vuex implementiert einen einfachen Einkaufswagen