Das Problem, dass Formularelemente und Eingabeaufforderungstext nicht ausgerichtet sind

In den letzten Projekten werden viele Formulare erstellt, insbesondere Kontrollkästchen und Optionsfelder. Während des Front-End-Entwicklungsprozesses wurde jedoch festgestellt, dass das einzelne (Kontrollkästchen) Kontrollkästchen und der Eingabeaufforderungstext dahinter ohne Einstellungen nicht ausgerichtet werden konnten und es einen großen Unterschied zwischen Firefox und IE gab. Auch wenn vertical-align: middle gesetzt ist, ist keine perfekte Ausrichtung möglich. Wie in der folgenden Abbildung dargestellt:

Ich habe also einige Websites im Internet überprüft und festgestellt, dass dieses Problem häufig auftritt, wie in der folgenden Abbildung (FF3.5) dargestellt:

Bei vielen Websites mit Formularseiten besteht das Problem, dass die Formularelemente und der Eingabeaufforderungstext nicht ausgerichtet werden können. Also beschloss ich, dieses Thema zu untersuchen. Zuerst suchte ich nach Wheatlees Artikel „Jeder hat seine eigene Meinung zur vertikalen Ausrichtung“. Wheatlee erwähnte in seinem Artikel mehrere wichtige Punkte zur vertikalen Zentrierung:

1. Wenn „vertical-align: middle“ verwendet wird, wird die Mitte des Elements mit der Mitte der umgebenden Elemente ausgerichtet.

2. Die Definition von „Mitte“ lautet hier: Das Bild hat natürlich die halbe Höhe, und der Text sollte 0,5 x über der Grundlinie stehen, also in der Mitte des kleinen „x“. Allerdings definieren viele Browser die Ex-Einheit oft als 0,5em, also ist es nicht unbedingt der exakte Mittelpunkt von x (wenn Sie Begriffe wie „Baseline“ nicht verstehen, lesen Sie bitte zuerst Wheatlees Artikel).

Als ich diesem Gedankengang folgte und ihn mit dem Problem verglich, auf das ich gestoßen bin, kam mir als Erstes die Frage in den Sinn, ob der Browser für die Darstellung des „Kontrollkästchens“ und des Bildes dieselben Regeln verwendet (ob er das Kontrollkästchen als quadratisches Bild behandelt). Schreiben Sie also den folgenden Code:

<Stil>
Textkörper{Schriftgröße:12px;}
</Stil>
<Eingabestil="vertical-align:middle;" Name="Test" Typ="Kontrollkästchen">
<img style="vertical-align:middle;" src="testbild.gif" />
Testtext

Das testpic.gif im Code ist ein schwarzes Bild, das genau die gleiche Größe wie das Kontrollkästchen hat. Die Anzeige unter FF3.5 sieht folgendermaßen aus: