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

Achtung! Diese Antwort ist zu alt y Funktioniert nicht auf modernen Browsern.

_{Ich bin nicht der Verfasser dieser Antwort, aber zum Zeitpunkt des Verfassens dieses Artikels ist dies die Antwort mit den meisten positiven und negativen Stimmen (+1035 -17), und sie ist immer noch als akzeptierte Antwort gekennzeichnet (wahrscheinlich, weil der ursprüngliche Verfasser der Frage derjenige ist, der diese Antwort geschrieben hat).}

Wie bereits mehrfach in den Kommentaren angemerkt, funktioniert diese Antwort auf den meisten Browsern nicht mehr (und scheint es seit 2013 auch nicht mehr zu tun).

---

Nach über einer Stunde des Tweakens, des Testens und des Ausprobierens verschiedener Auszeichnungsstile glaube ich, dass ich eine annehmbare Lösung gefunden habe. Die Anforderungen für dieses spezielle Projekt waren:

1. Die Eingänge müssen auf einer eigenen Leitung liegen.
2. Checkbox-Eingaben müssen in allen Browsern ähnlich (wenn nicht sogar identisch) vertikal am Beschriftungstext ausgerichtet werden.
3. Wenn der Beschriftungstext umbricht, muss er eingerückt werden (also kein Umbruch nach unten unterhalb des Ankreuzfeldes).

Bevor ich eine Erklärung gebe, möchte ich Ihnen den Code nennen:

label {
  display: block;
  padding-left: 15px;
  text-indent: -15px;
}
input {
  width: 13px;
  height: 13px;
  padding: 0;
  margin:0;
  vertical-align: bottom;
  position: relative;
  top: -1px;
  *overflow: hidden;
}

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

Hier ist das Arbeitsbeispiel in JSFiddle .

Dieser Code setzt voraus, dass Sie einen Reset wie den von Eric Meyer verwenden, der die Ränder und das Padding der Formulareingabe nicht überschreibt (und daher die Ränder und das Padding in das Eingabe-CSS zurücksetzt). Offensichtlich in einer Live-Umgebung werden Sie wahrscheinlich Verschachtelung / Überschreiben Zeug andere Eingabeelemente zu unterstützen, aber ich wollte die Dinge einfach zu halten.

Zu beachtende Punkte:

• Le site *overflow Deklaration ist ein Inline-IE-Hack (der Stern-Eigenschafts-Hack). Sowohl IE 6 als auch 7 bemerken ihn, aber Safari und Firefox ignorieren ihn. Ich denke, es könnte gültig sein CSS, aber Sie sind immer noch besser mit bedingten Kommentare; nur der Einfachheit halber verwendet es.
• Soweit ich das beurteilen kann, ist die einzige vertical-align Aussage, die in allen Browsern gleich war, war vertical-align: bottom . Diese Einstellung und die anschließende relative Positionierung nach oben verhielten sich in Safari, Firefox und IE mit nur ein oder zwei Pixeln Abweichung fast identisch.
• Das Hauptproblem bei der Arbeit mit der Ausrichtung ist, dass der IE einen Haufen mysteriöser Leerzeichen um die Eingabeelemente herum platziert. Es handelt sich nicht um ein Padding oder einen Margin, und es ist verdammt hartnäckig. Die Einstellung einer Breite und Höhe für das Kontrollkästchen und dann overflow: hidden schneidet aus irgendeinem Grund das zusätzliche Leerzeichen ab und ermöglicht es dem IE, sich bei der Positionierung sehr ähnlich wie Safari und Firefox zu verhalten.
• Je nach der Größe Ihres Textes müssen Sie zweifellos die relative Positionierung, Breite, Höhe usw. anpassen, damit alles richtig aussieht.

Ich hoffe, das hilft noch jemandem! Ich habe diese spezielle Technik noch nicht bei anderen Projekten ausprobiert als bei dem, an dem ich heute Morgen gearbeitet habe, also meldet euch auf jeden Fall, wenn ihr etwas findet, das besser funktioniert.

---

Warnung! Diese Antwort ist zu alt y Funktioniert nicht auf modernen Browsern.

Answer 2

Manchmal benötigt vertical-align zwei Inline-Elemente (span, label, input, etc...) nebeneinander, um richtig zu funktionieren. Die folgenden Kontrollkästchen werden in IE, Safari, FF und Chrome richtig vertikal zentriert, auch wenn die Textgröße sehr klein oder groß ist.

Sie stehen alle nebeneinander in derselben Zeile, aber der Zeilenumbruch sorgt dafür, dass der gesamte Beschriftungstext immer neben dem Ankreuzfeld bleibt.

Der Nachteil sind die zusätzlichen sinnlosen SPAN-Tags.

.checkboxes label {
  display: inline-block;
  padding-right: 10px;
  white-space: nowrap;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}

<form>
  <div class="checkboxes">
    <label><input type="checkbox"> <span>Label text x</span></label>
    <label><input type="checkbox"> <span>Label text y</span></label>
    <label><input type="checkbox"> <span>Label text z</span></label>
  </div>
</form>

Wenn Sie nun einen sehr langen Beschriftungstext haben, der benötigt ohne Umbruch unter dem Kontrollkästchen umzubrechen, würden Sie Polsterung und negativen Texteinzug für die Beschriftungselemente verwenden:

.checkboxes label {
  display: block;
  padding-right: 10px;
  padding-left: 22px;
  text-indent: -22px;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}

<form>
  <div class="checkboxes">
    <label><input type="checkbox"> <span>Label text x so long that it will probably wrap so let's see how it goes with the proposed CSS (expected: two lines are aligned nicely)</span></label>
    <label><input type="checkbox"> <span>Label text y</span></label>
    <label><input type="checkbox"> <span>Label text z</span></label>
  </div>
</form>

Answer 3

Abarbeiten von Die Lösung von One Crayon Ich habe etwas, das für mich funktioniert und einfacher ist:

.font2 {font-family:Arial; font-size:32px} /* Sample font */

input[type=checkbox], input[type=radio] {
  vertical-align: middle;
  position: relative;
  bottom: 1px;
}

input[type=radio] { 
  bottom: 2px; 
} 

<label><input type="checkbox" /> Label text</label>
<p class="font2">
  <label><input type="checkbox"/> Label text</label>
</p>

In Safari (dessen Baseline ich vertraue) wird Pixel für Pixel gleich gerendert, und sowohl Firefox als auch IE7 sehen genauso gut aus. Es funktioniert auch für verschiedene Schriftgrößen von Etiketten, groß und klein. Nun, für die Festsetzung IE's Grundlinie auf Auswahlen und Eingaben ...

---

Aktualisierung: (Bearbeitung durch einen Dritten)

Die richtige bottom Position hängt von Schriftart und -größe ab! Ich fand mit bottom: .08em; für Kontrollkästchen und Radioelemente ist ein guter allgemeiner Wert. Ich habe es in Chrome/Firefox/IE11 unter Windows mit den Schriftarten Arial und Calibri in verschiedenen kleinen/mittleren/großen Schriftgrößen getestet.

.font2, .font2 input {font-family:Arial; font-size:32px} /* Sample font */

input[type=checkbox], input[type=radio] {
  vertical-align: middle; 
  position: relative;
  bottom: .08em; /* this is a better value for different fonts! */
}

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

<p class="font2">
  <label><input type="checkbox"/> Label text</label>
</p>

Answer 4

Eine einfache Sache, die gut zu funktionieren scheint, ist die Anpassung der vertikalen Position des Kontrollkästchens mit vertical-align. Es wird immer noch in verschiedenen Browsern unterschiedlich sein, aber die Lösung ist unkompliziert.

input {
    vertical-align: -2px;
}

Referenz

Answer 5

Versuchen Sie vertical-align: middle

Auch Ihr Code sieht so aus, als sollte er das sein:

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