Konsistente Ausrichtung von Kontrollkästchen und deren Beschriftungen in verschiedenen Browsern

Question

Dies ist eines der kleineren CSS-Probleme, die mich ständig plagen.

Wie richten sich die Leute bei Stack Overflow vertikal aus? checkboxes und ihre labels durchgehend Cross-Browser ?

Wenn ich sie in Safari richtig ausrichte (normalerweise mit vertical-align: baseline über die input ), sind sie in Firefox und IE vollständig verschwunden.

Reparieren Sie es in Firefox, und Safari und IE sind unweigerlich durcheinander. Jedes Mal, wenn ich ein Formular programmiere, verschwende ich damit Zeit.

Hier ist der Standardcode, mit dem ich arbeite:

<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
</form>

Ich verwende in der Regel Eric Meyers Reset, so dass die Formularelemente relativ frei von Überschreibungen sind. Ich freue mich auf alle Tipps und Tricks, die Sie zu bieten haben!

Answer 1

Wenn Sie Twitter Bootstrap verwenden, können Sie einfach die checkbox Klasse auf der <label> :

<label class="checkbox">
    <input type="checkbox"> Remember me
</label>

Answer 2

CSS:

.threeCol .listItem {
    width:13.9em;
    padding:.2em;
    margin:.2em;
    float:left;
    border-bottom:solid #f3f3f3 1px;
}
.threeCol input {
    float:left;
    width:auto;
    margin:.2em .2em .2em 0;
    border:none;
    background:none;
}
.threeCol label {
    float:left;
    margin:.1em 0 .1em 0;
}

HTML:

<div class="threeCol">
    <div class="listItem">
        <input type="checkbox" name="name" id="id" value="checkbox1" />
        <label for="name">This is your checkBox</label>
    </div>
</div>

Der obige Code platziert Ihre Listenelemente in drei Spalten und ändert einfach die Breite entsprechend.

Answer 3

position: relative; hat einige Probleme im IE mit z-index und Animationen wie jQuery's slideUp/slideDown.

CSS:

input[type=checkbox], input[type=radio] {
    vertical-align: baseline;
    position: relative;
    top: 3px;
    margin: 0 3px 0 0;
    padding: 0px;
}
input.ie7[type=checkbox], input.ie7[type=radio] {
    vertical-align: middle;
    position: static;
    margin-bottom: -2px;
    height: 13px;
    width: 13px;
}

jQuery:

$(document).ready(function () {
    if ($.browser.msie && $.browser.version <= 7) {
        $('input[type=checkbox]').addClass('ie7');
        $('input[type=radio]').addClass('ie7');
    }
});

Das Styling muss wahrscheinlich in Abhängigkeit von der Schriftgröße, die in <label>

PS:
Ich benutze ie7js damit das Css im IE6 funktioniert.

Answer 4

Dies ist nicht der beste Weg, um das Problem zu lösen

vertical-align: middle

---

Hinzufügen von style="position:relative;top:2px;" in das Eingabefeld würde es nach unten verschieben 2px . Je nach Schriftgröße können Sie sie also verschieben.

Answer 5

Die einfachste Lösung ist

input {
  vertical-align: text-top;
}