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
Artikel empfehlen
Implementierungsmethode für die Datenspeicherung im WeChat-Applet
Inhaltsverzeichnis Globale Variable „globalData“ ...
Methode zum Erstellen eines privaten Docker-Warehouses basierend auf Harbor
Inhaltsverzeichnis 1. Einführung in Harbor 1. Har...
Das Problem, dass beim Verbinden mit der MySQL-Datenbank in Idea chinesische Zeichen verstümmelt erscheinen
Problem: Bei Verwendung von JDBC zur Verbindung m...
Vollständige Schritte zur Verwendung von Echarts und Unterverpackungen im WeChat Mini-Programm
Vorwort Obwohl der Feiertag vorbei ist, zeigt er ...
Analyse und Lösung des abnormalen Problems beim Laden von JAR in Tomcat
Beschreibung des Phänomens: Das Projekt verwendet...
JavaScript-Dom-Objektoperationen
Inhaltsverzeichnis 1. Kern 1. Holen Sie sich den ...
Detaillierte Erklärung der vier Arten von MySQL-Verbindungen und Multi-Table-Abfragen
Inhaltsverzeichnis MySQL Inner Join, Left Join, R...
HTML+VUE-Paging zur Realisierung einer coolen IoT-Großbildfunktion
Wirkung demo.html <html> <Kopf> <m...
Div überschreitet den versteckten Text und versteckt den CSS-Code jenseits des Div-Teils
Vor dem Verstecken: Nach dem Verstecken: CSS: Code...
Mobile Frontend-Anpassungslösung (Zusammenfassung)
Ich habe online gesucht und festgestellt, dass in...
Lösung für die Upload-Einschränkung von Element-ui-Uploaddateien
Frage Die Angabe des Typs der hochgeladenen Datei...
Fallstricke bei der neueren Version des IDEA2021 Tomcat10-Servlets
Da die Version, die ich beim Lernen verwendet hab...
Eine kurze Analyse, wie Sie das Root-Passwort in Linux suse11 ändern können, wenn Sie es vergessen haben
So lösen Sie das Problem des Vergessens des Root-...
So generieren Sie MySQL-Beispielcodes für die stapelweise Generierung einer Tabelle mit nicht duplizierten Mobiltelefonnummern
Vorwort In vielen MySQL-Test-Szenarien müssen ein...
Stellen Sie die Grafana+Prometheus-Konfiguration mit Docker bereit
docker-compose-monitor.yml Version: '2' N...