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

Eine kurze Analyse der parallelen MySQL-Replikation

CSS-Standard: Eigenschaft „vertical-align“

Eine kurze Analyse der parallelen MySQL-Replikation

Erstellen Sie einen hochverfügbaren MySQL-Cluster mit Dual-VIP

Installationshandbuch für die MySQL 5.7.18-Version (einschließlich Binärdateiversion)

Beispielcode zum Installieren der ASPNET.Core3.0-Runtime unter Linux

Vollständige Analyse der Webseitenelemente

Das Umschalten zwischen React-Antd-Tabs führt zu wiederholter Aktualisierung von Unterkomponenten

So passen Sie einen EventEmitter in node.js an

Beispiel für Auslassungspunkte bei Überlauf von mehrzeiligem CSS-Text

MySQL-Daemon konnte nicht gestartet werden – Fehlerlösung

Websocket+Vuex implementiert eine Echtzeit-Chat-Software

Artikel empfehlen

Ideen und Methoden zur Realisierung von Echtzeit-Protokollberichten mit der reinen Nginx-Konfiguration

html+css+js zur Realisierung der Funktion der Fotovorschau und des Bildhochladens

Lösung zum Vergessen des Passworts bei der Installation von MySQL unter Linux/Mac

Detaillierte Erläuterung von 5 Lösungen für das adaptive CSS-Layout für Fortgeschrittene

So führen Sie py-Dateien direkt unter Linux aus

Detaillierte Erläuterung der MySQL Master-Slave-Replikation und der Lese-/Schreibtrennung

Zusammenfassung und Praxis des Javascript-Prototyp-Kettendiagramms

nginx Konfigurationsort Zusammenfassungsort Regelmäßiges Schreiben und Umschreiben von Regeln

Lösungen für Dateien/Ordner, die unter Linux nicht gelöscht werden können

Ausnahmefehler beim Packen von Webpack-Dateien

MySQL-Join-Abfrage (Left Join, Right Join, Inner Join)

Zusammenfassung der häufig verwendeten Datenbank- und Tabellen-Sharding-Lösungen von MySQL

Detailliertes Beispiel für das Linux-Allround-Systemüberwachungstool dstat

Detailliertes Beispiel der CSS3-Boxschatteneigenschaft

Fassen Sie die häufigsten Anwendungsprobleme von XHTML-Code zusammen