Aktuelle Projekte umfassen die Herstellung vieler Formen, insbesondere Kontrollkästchen und Radios. Während des Frontend-Entwicklungsprozesses wurde jedoch festgestellt, dass die einzelnen (mehreren) Kontrollkästchen und der Eingabeaufforderungstext dahinter nicht ohne Einstellungen ausgerichtet werden können und es einen großen Unterschied zwischen Firefox und IE gibt. Selbst wenn „vertikal-align:middle“ festgelegt ist, ist es immer noch nicht perfekt ausgerichtet. Wie unten gezeigt:
Deshalb habe ich einige Websites online überprüft und festgestellt, dass dieses Problem häufig auftritt, wie unten gezeigt (FF3.5):
Auf vielen Webseiten mit Formularen besteht das Problem, dass die Formularelemente und der Eingabeaufforderungstext nicht ausgerichtet werden können. Also beschloss ich, mich mit diesem Thema zu befassen. Zuerst habe ich nach dem Artikel von Senior Wheatlee gesucht: „ Jeder hat unterschiedliche Meinungen zu Vertical-Align “. In seinem Artikel erwähnte Wheatlee die folgenden wichtigen Punkte zur vertikalen Zentrierung:
1. Wenn Vertical-Align:Middle verwendet wird, wird die Mitte des Elements an der Mitte der umgebenden Elemente ausgerichtet.
2. Die Definition von „Mitte“ lautet hier: Das Bild ist natürlich halb so hoch und der Text sollte basierend auf der Grundlinie, die genau die Mitte des Kleinbuchstabens „x“ ist, um 0,5 Ex nach oben verschoben werden. Allerdings definieren viele Browser die Einheit ex oft als 0,5em, sodass es nicht unbedingt der exakte Mittelpunkt von x ist (wenn Sie Begriffe wie Grundlinie nicht verstehen, lesen Sie bitte zuerst Wheatlees Artikel).
Nach dieser Idee und dem Vergleich der aufgetretenen Probleme dachte ich zunächst daran, zu überprüfen, ob der Browser dieselben Regeln zum Rendern von „Kontrollkästchen“ und Bildern verwendet (ob er das Kontrollkästchen als quadratisches Bild behandelt). Also habe ich folgenden Code geschrieben:
<Stil>
body{font-size:12px;}
</style>
<input style="vertical-align:middle;" name="test" type="checkbox">
<img style="vertical-align:middle;" src="testpic.gif" />
Testtext
Das testpic.gif im Code ist ein schwarzes Bild mit genau der gleichen Größe wie das Kontrollkästchen. Die Anzeige unter FF3.5 ist wie folgt:
