In einem früheren Artikel habe ich über eine Möglichkeit geschrieben, ein Radio-Button, bzw. eine Checkbox, und den dazugehörigen Text auf eine Höhe zu bringen:

input {
    vertical-align: bottom;
}

Diese Variante funktioniert leider nicht im Internet Explorer.
Der geliebte IE benötigt wiedermal eine Sonderbehandlung:

input {
    vertical-align: baseline;
}

Damit z.B. Firefox die vertikale Ausrichtung bottom und der IE die Ausrichtung baseline interpretiert, hier zwei Vorschläge zur Umsetzung.

IE-Hack

input {
    vertical-align: bottom;
    #vertical-align: baseline /* IE */
}

Conditional Comments

<!--[if IE]>
input {
    vertical-align: baseline;
}
<![endif]-->

Ziel: Gleiche Höhe

Ziel ist es einen Radio-Button bzw. Checkbox zu erstellen. Daneben wird ein Beschreibungstext angezeigt, der auf gleicher Höhe angezeigt wird.

Es wird folgender HTML-Code verwendet:

<input type="checkbox" id="test" />
<label for="test">Gleiche Höhe</label>

Nicht auf gleicher Höhe

Wenn dieser Code verwendet wird, sieht das Ergebnis jedoch nicht so aus, wie es angedacht ist.

Um das Problem zu lösen, reicht folgende CSS-Eigenschaft:

input {
    vertical-align: bottom;
}

Mit dieser kleinen Änderung wird nun der Text direkt neben dem Radio-Button bzw. neben der Checkbox angezeigt.

Update

IE-Kompatibel