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

Analyse von Context-Anwendungsszenarien in React

CSS-Standard: Eigenschaft „vertical-align“

Analyse von Context-Anwendungsszenarien in React

ElementUI-Komponente el-dropdown (Falle)

Tutorial zur Installation und Konfiguration der Linux CentOS MySQL-Datenbank

jQuery implementiert Akkordeoneffekte

Lassen Sie uns ausführlich über die gemeinsame MySQL-Abfrage sprechen

Grundlegende Konzepte und allgemeine Methoden des Map-Mappings in ECMAScript6

Reines CSS, um einen bewölkten Wettersymboleffekt zu erzielen

Analysieren Sie die Methode zur Überwachung von Nginx durch Prometheus + Grafana

Miniprogramm zur Implementierung des Slider-Effekts

TD bei der Webseitenproduktion kann auch über die versteckte Anzeige hinauslaufen

Artikel empfehlen

Analyse des Prinzips des Rabbitmq Heartbea-Herzschlagerkennungsmechanismus

Fälle, in denen bestimmte Bibliotheken beim Sichern der Datenbank mit mysqldump ausgeschlossen werden

Fassen Sie einige häufige Rankingprobleme in MySQL zusammen

Docker exec führt mehrere Befehle aus

JavaScript zur Implementierung eines einziehbaren sekundären Menüs

Lösung für die Auswirkungen leerer Pfade auf die Seitenleistung

Zeichnen Sie den Verbindungsvorgang mit der lokalen virtuellen Linux-Maschine über SSH auf

Verwenden von JavaScript zum Implementieren von Karusselleffekten

Beispielanalyse zur Metadatenextraktion von MySQL und Oracle

So ändern Sie Port 3389 des Remotedesktops von Windows Server 2008 R2

JavaScript implementiert Feuerwerkseffekte mit Soundeffekten

JavaScript, um einen ausgefallenen Karusselleffekt zu erzielen

Spezifische Verwendung von MySQL-Operatoren (und, oder, in, nicht)

Grafisches Tutorial zur Installation von CentOS 7.3 auf VMWare

Fassen Sie die allgemeinen Eigenschaften von BigIn-Funktionen in JavaScript zusammen