In jüngsten Projekten beinhaltet eine Menge Form der Form, insbesondere Kontrollkästchen und Radierkästchen. Während des Front-End-Entwicklungsprozesses wurde jedoch festgestellt, dass die einzelnen (komplexen) Kontrollkästchen und der schnelle Text dahinter nicht ohne Einstellungen ausgerichtet werden konnten, und es gab einen großen Unterschied zwischen Firefox und dh. Auch wenn vertikale Ausrichtung: Middle festgelegt ist, kann sie immer noch nicht perfekt ausgerichtet werden. Wie in der Abbildung unten gezeigt:
Daher habe ich einige Websites online überprüft und festgestellt, dass dieses Problem üblich ist, wie in der folgenden Abbildung gezeigt (ff3.5):
In vielen Websites gibt es ein Problem, dass die Formularelemente nicht mit dem schnellen Text übereinstimmen können. Daher habe ich vor, dieses Problem zu studieren. Zuerst suchte ich nach dem Artikel "Jeder sagt alle zu vertikaler Ausrichtung" von Senior Wheatlee. In seinem Artikel erwähnte Wheatlee mehrere wichtige Punkte über vertikale Zentrierung:
1. Wenn vertikale Ausrichtung: Mitte: Die Mitte des Elements ist mit der Mitte der umgebenden Elemente ausgerichtet.
2. Die Definition des Zentrums hier ist: Das Bild ist natürlich die Hälfte der Höhe, und der Text sollte auf der Grundlage der Basislinie um 0,5 EX bewegt werden, dh der Mitte des Kleinbuchstabens X. Viele Browser definieren jedoch häufig die Einheit von EX als 0,5 -EM, daher ist es nicht unbedingt das Zentrum von X (wenn Sie keine Substantive wie Baseline verstehen, lesen Sie bitte zuerst den Artikel von Wheatlee).
Nach dieser Idee wird im Vergleich zu den Problemen, die ich aufgenommen habe, als erstes in den Sinn, zu überprüfen, ob der Browser dieselben Regeln für die Kontrollkästchen und Bilder verwendet, um sie zu rendern (ob Sie die Kontrollkästchen als quadratisches Bild behandeln). Also habe ich den folgenden Code geschrieben:
<Styles>
Körper {Schriftgröße: 12px;}
</style>
<Eingabestil = vertikal-align: Mitte; Name = Test Typ = Kontrollkästchen>
<img style = Vertical-Align: Middle; src = testpic.gif />
Testtext
Der Testpice.gif im Code ist ein schwarzes Bild mit genau der gleichen Größe wie das Kontrollkästchen. Das Folgende wird unter FF3.5 angezeigt:
Vorherige Seite 1 2 3 4 Nächste Seite Lesen Sie den vollständigen Text