Dies ist eines der kleineren CSS-Probleme, die mich ständig plagen. Wie richten sich die Leute rund um den Stapelüberlauf vertikal aus checkboxes
und wie labels
konsistent ist der Browser ? Immer wenn ich sie in Safari richtig ausrichte (normalerweise vertical-align: baseline
auf dem input
), sind sie in Firefox und IE vollständig deaktiviert. Beheben Sie das Problem in Firefox, und Safari und IE sind unweigerlich durcheinander. Ich verschwende jedes Mal Zeit damit, wenn ich ein Formular codiere.
Hier ist der Standardcode, mit dem ich arbeite:
<form>
<div>
<label><input type="checkbox" /> Label text</label>
</div>
</form>
Normalerweise verwende ich Eric Meyers Reset, sodass Formularelemente relativ frei von Überschreibungen sind. Ich freue mich auf alle Tipps oder Tricks, die Sie zu bieten haben!
height
undline-height
Attributen erreicht, werfen Sie einen Blick auf jsfiddle.net/wepw5o57/3position
undtop
wird dieses Problem lösen Beispiel: jsfiddle.net/ynkjc22sAntworten:
Nach über einer Stunde Optimieren, Testen und Ausprobieren verschiedener Markup-Stile denke ich, dass ich möglicherweise eine anständige Lösung habe. Die Anforderungen für dieses spezielle Projekt waren:
Bevor ich auf eine Erklärung eingehe, gebe ich Ihnen nur den Code:
Hier ist das Arbeitsbeispiel in JSFiddle .
In diesem Code wird davon ausgegangen, dass Sie einen Reset wie den von Eric Meyer verwenden, der die Eingaberänder und das Auffüllen von Formularen nicht überschreibt (daher werden das Zurücksetzen von Rändern und Auffüllungen in das Eingabe-CSS eingefügt). Natürlich werden Sie in einer Live-Umgebung wahrscheinlich Dinge verschachteln / überschreiben, um andere Eingabeelemente zu unterstützen, aber ich wollte die Dinge einfach halten.
Dinge zu beachten:
*overflow
Deklaration ist ein Inline-IE-Hack (der Star-Property-Hack). Sowohl IE 6 als auch IE werden es bemerken, aber Safari und Firefox werden es ordnungsgemäß ignorieren. Ich denke, es könnte gültiges CSS sein, aber mit bedingten Kommentaren sind Sie immer noch besser dran. Ich habe es nur der Einfachheit halber benutzt.vertical-align
Aussage , die in allen Browsern konsistent war warvertical-align: bottom
. Wenn Sie dies einstellen und dann relativ nach oben positionieren, verhält es sich in Safari, Firefox und IE fast identisch mit nur ein oder zwei Pixeln Diskrepanz.overflow: hidden
aus irgendeinem Grund den zusätzlichen Platz einschränken, kann die Positionierung des IE sehr ähnlich wie bei Safari und Firefox erfolgen.Hoffe das hilft jemand anderem! Ich habe diese spezielle Technik bei keinem anderen Projekt als dem, an dem ich heute Morgen gearbeitet habe, ausprobiert. Wenn Sie also etwas finden, das konsistenter funktioniert, melden Sie sich auf jeden Fall.
quelle
Manchmal benötigt die vertikale Ausrichtung zwei Inline-Elemente (Bereich, Beschriftung, Eingabe usw.) nebeneinander, um ordnungsgemäß zu funktionieren. Die folgenden Kontrollkästchen sind in IE, Safari, FF und Chrome richtig vertikal zentriert, selbst wenn die Textgröße sehr klein oder groß ist.
Sie schweben alle in derselben Zeile nebeneinander, aber der Nowrap bedeutet, dass der gesamte Beschriftungstext immer neben dem Kontrollkästchen bleibt.
Der Nachteil sind die besonders bedeutungslosen SPAN-Tags.
Nun, wenn Sie einen sehr langen Beschriftungstext haben , die benötigte ohne Verpackung unter dem Kontrollkästchen wickeln, dann würden Sie Polsterung und negative Texteinrückung auf den Kennzeichnungselementen verwenden:
quelle
display: block; float: left;
scheint überflüssig zu seinIch arbeite an der Lösung von One Crayon und habe etwas, das für mich funktioniert und einfacher ist:
Rendert Pixel für Pixel in Safari (dessen Basislinie ich vertraue) gleich und sowohl Firefox als auch IE7 checken als gut aus. Es funktioniert auch für verschiedene große und kleine Schriftgrößen. Nun zum Fixieren der IE-Basislinie für Auswahlen und Eingaben ...
Update: (Drittanbieter-Bearbeitung)
Die richtige
bottom
Position hängt von der Schriftfamilie und der Schriftgröße ab! Ich fand, dass die Verwendungbottom: .08em;
für Kontrollkästchen und Radioelemente ein guter allgemeiner Wert ist. Ich habe es in Chrome / Firefox / IE11 in Windows mit Arial- und Calibri-Schriftarten mit mehreren kleinen / mittleren / großen Schriftgrößen getestet.quelle
Eine einfache Sache, die gut zu funktionieren scheint, besteht darin, die vertikale Position des Kontrollkästchens mit vertikaler Ausrichtung anzupassen. Es wird immer noch von Browser zu Browser unterschiedlich sein, aber die Lösung ist unkompliziert.
Referenz
quelle
vertical-align
undposition: relative
weil es auch in IE9 richtig funktioniert :)em
Versuchen
vertical-align: middle
Auch Ihr Code scheint so zu sein, wie er sein sollte:
quelle
<label for="blah">
Dies ist nur erforderlich, wenn Sie etwas verwenden, bei dem das Umschließen des Etiketts keinen Sinn ergibt (z. B. ein Textfeld;<label for="blah">Foo</label><input id="blah" type="text" />
in diesem Fall werde ich es im Allgemeinen verwenden ). Mit Kontrollkästchen finde ich, dass es weniger Markup ist, es zu verpacken.Probieren Sie meine Lösung aus, ich habe sie in IE 6, FF2 und Chrome ausprobiert und sie wird in allen drei Browsern Pixel für Pixel gerendert.
quelle
Die einzige perfekt funktionierende Lösung für mich ist:
Heute in Chrome, Firefox, Opera, IE 7 und 8 getestet. Beispiel: Geige
quelle
Ich habe meine Lösung noch nicht vollständig getestet, aber sie scheint großartig zu funktionieren.
Mein HTML ist einfach:
Ich habe dann alle Kontrollkästchen
24px
für Höhe und Breite aktiviert. Um den Text ausgerichtet Ich mache das Etikett istline-height
auch24px
und assignvertical-align: top;
etwa so:BEARBEITEN: Nach dem IE-Test habe ich
vertical-align: bottom;
die Eingabe hinzugefügt und das CSS des Labels geändert. Möglicherweise benötigen Sie einen bedingten IE-CSS-Fall, um das Auffüllen zu sortieren. Text und Feld sind jedoch inline.Wenn jemand feststellt, dass dies nicht funktioniert, lassen Sie es mich bitte wissen. Hier ist es in Aktion (in Chrome und IE - Entschuldigung, da Screenshots auf der Netzhaut gemacht wurden und Parallelen für IE verwendet wurden):
quelle
Normalerweise verwende ich die Zeilenhöhe, um die vertikale Position meines statischen Textes anzupassen:
Ich hoffe, das hilft.
quelle
Der Trick besteht darin, die vertikale Ausrichtung nur in Tabellenzellen oder im Inline-Block zu verwenden, wenn das Label-Tag verwendet wird.
quelle
Schauen wir uns zum Schluss die Ursache des Problems an
Die Kontrollkästchen werden mit Bildern gerendert (benutzerdefinierte können über CSS festgelegt werden). Hier ist ein (deaktiviertes) Kontrollkästchen in FireFox, das mit dem DOM-Inspektor hervorgehoben wird:
Und hier ist das gleiche nicht gestaltete Kontrollkästchen in Chrome:
Sie können den Rand sehen (orange); Polsterung ist nicht vorhanden (wird grün angezeigt). Was ist dieser Pseudorand rechts und unten im Kontrollkästchen? Dies sind Teile des Bildes, die für das Kontrollkästchen verwendet werden . Das ist der Grund, warum die Verwendung einfach
vertical-align: middle
nicht ausreicht und die Ursache für die browserübergreifenden Probleme ist.Was können wir dagegen tun?
Eine naheliegende Option ist - ersetzen Sie die Bilder! Glücklicherweise kann man dies über CSS tun und diese durch externe Bilder, Base64-Bilder (In-CSS-Bilder), In-CSS-SVG oder einfach nur Pseudoelemente ersetzen. Es ist ein robuster (browserübergreifender!) Ansatz, und hier ist ein Beispiel für eine solche Anpassung, die aus dieser Frage gestohlen wurde :
Vielleicht möchten Sie einige ausführlichere Artikel über solche Stile lesen, wie die hier aufgeführten . Es liegt außerhalb des Rahmens dieser Antwort.
Ok, was ist noch mit der Lösung ohne benutzerdefinierte Bilder oder Pseudoelemente?
TL; DR: Sieht so aus, als würde dies nicht funktionieren. Verwenden Sie stattdessen das benutzerdefinierte Kontrollkästchen
Beachten wir zunächst, dass es in anderen Browsern keine konsistente Lösung gab, wenn diese Pseudoränder innerhalb des Kontrollkästchensymbols willkürlich waren. Um eines zu erstellen, müssen wir die Anatomie solcher Bilder in vorhandenen Browsern untersuchen.
Welche Browser haben also die Pseudoränder in Kontrollkästchen? Ich habe Chrome 75, Vivaldi 2.5 (Chrom-basiert), FireFox 54 (fragen Sie nicht, warum so veraltet), IE 11, Edge 42, Safari? (für eine Minute ausgeliehen, vergessen, die Version zu überprüfen). Nur Chrome und Vivaldi haben solche Pseudoränder (ich vermute auch alle Chromium-basierten Browser wie Opera).
Wie groß sind diese Pseudoränder? Um dies herauszufinden, kann man ein gezoomtes Kontrollkästchen verwenden:
Mein Ergebnis ist ~ 7% der Breite / Höhe und damit 0,9-1,0 Pixel in absoluten Einheiten. Die Genauigkeit kann jedoch in Frage gestellt werden: Probieren Sie verschiedene Werte
zoom
für das Kontrollkästchen aus. In meinen Tests in Chrome und Vivaldi ist die relative Größe des Pseudorandes bei denzoom
Werten 10, 20 und 11-19 (??) sehr unterschiedlich :scale
scheint konsequenter zu sein:also sind wahrscheinlich ~ 14% und 2px die richtigen Werte.
Nachdem wir nun die Größe des Pseudorandes kennen (?), Beachten wir, dass dies nicht ausreicht. Sind die Größen der Kontrollkästchensymbole für alle Browser gleich? Ach! Folgendes zeigt der DOM-Inspektor für nicht gestaltete Kontrollkästchen:
Bevor wir nun Lösungen oder Tricks diskutieren, fragen wir uns: Was ist eine korrekte Ausrichtung? Was versuchen wir zu erreichen? Bis zu einem gewissen Punkt ist es Geschmackssache, aber im Grunde kann ich mir die folgenden "schönen" Ausrichtungsaspekte vorstellen:
Text und Kontrollkästchen auf derselben Grundlinie (ich passe die Größe der Kontrollkästchen hier absichtlich nicht an):
oder haben die gleiche mittlere Zeile in Kleinbuchstaben:
oder dieselbe mittlere Zeile in Großbuchstaben (es ist einfacher, den Unterschied für verschiedene Schriftgrößen zu erkennen):
Außerdem müssen wir entscheiden, ob die Größe des Kontrollkästchens der Höhe eines Kleinbuchstabens, eines Großbuchstabens oder etwas anderem (größer, kleiner oder zwischen Kleinbuchstaben und Großbuchstaben) entsprechen soll.
Nennen wir für diese Diskussion eine Ausrichtung schön, wenn sich das Kontrollkästchen auf derselben Grundlinie wie der Text befindet und die Größe eines Großbuchstabens hat (eine sehr umstrittene Wahl):
Welche Werkzeuge müssen wir nun:
?
Die in Bezug auf Kontrollkästchen Größenanpassung : Es gibt
width
,height
,size
,zoom
,scale
(habe ich etwas verpasst?).zoom
undscale
erlauben Sie nicht, die absolute Größe festzulegen, daher helfen sie möglicherweise nur beim Anpassen an die Textgröße, nicht beim Festlegen der browserübergreifenden Größe (es sei denn, wir können browserspezifische Regeln schreiben).size
funktioniert nicht mit Chrome (hat es mit altem IE funktioniert? sowieso ist es nicht so interessant).width
undheight
arbeiten in Chrome und anderen Browsern, sodass wir eine gemeinsame Größe festlegen können, aber auch in Chrome wird die Größe des gesamten Bilds festgelegt, nicht das Kontrollkästchen selbst. Hinweis: Es ist das Minimum (Breite, Höhe), das die Größe eines Kontrollkästchens definiert (wenn Breite ≠ Höhe ist, wird der Bereich außerhalb des Kontrollkästchenquadrats zum "Pseudorand" hinzugefügt).Leider werden die Pseudoränder im Chrome-Kontrollkästchen, soweit ich sehen kann, für keine Breite und Höhe auf Null gesetzt.
Ich fürchte, es gibt heutzutage keine zuverlässige Nur-CSS-Methode .
Betrachten wir die vertikale Ausrichtung.
vertical-align
Wennmiddle
oderbaseline
aufgrund des Pseudorandes von Chrome nicht konsistente Ergebnisse erzielt werden können , besteht die einzige echte Option, um für alle Browser das gleiche "Koordinatensystem" zu erhalten, darin, Beschriftung und Eingabe auf Folgendes auszurichtentop
:(auf dem Bild: vertikal ausrichten: oben, unten und unten ohne Kastenschatten)
Welches Ergebnis erhalten wir daraus?
Das obige Snippet funktioniert mit Chrome (Chromium-basierte Browser), andere Browser erfordern jedoch eine kleinere Größe des Kontrollkästchens. Es scheint unmöglich zu sein, sowohl die Größe als auch die vertikale Ausrichtung so anzupassen, dass die Bild-Eigenart des Chromium-Kontrollkästchens umgangen wird. Mein letzter Vorschlag lautet: Verwenden Sie stattdessen benutzerdefinierte Kontrollkästchen - und Sie vermeiden Frustration :)
quelle
Jetzt, da Flexbox in allen modernen Browsern unterstützt wird, scheint mir so etwas ein einfacher Ansatz zu sein.
Hier ist die vollständige Demo der vorangestellten Version:
Code-Snippet anzeigen
quelle
Ich denke, das ist der einfachste Weg
quelle
Ich mag die relative Positionierung nicht, weil dadurch das Element auf seiner Ebene über alles andere gerendert wird (es kann auf etwas übergehen, wenn Sie ein komplexes Layout haben).
Ich habe festgestellt,
vertical-align: sub
dass Kontrollkästchen in Chrome, Firefox und Opera gut genug ausgerichtet sind. Ich kann Safari nicht überprüfen, da ich kein MacOS habe und IE10 leicht ausgeschaltet ist, aber ich habe festgestellt, dass es eine gute Lösung für mich ist.Eine andere Lösung könnte darin bestehen, für jeden Browser ein spezifisches CSS zu erstellen und es mit einigen vertikalen Ausrichtungen in% / pixels / EMs zu optimieren: http://css-tricks.com/snippets/css/browser-specific-hacks/
quelle
Das funktioniert gut für mich:
quelle
Die gewählte Antwort mit mehr als 400 Upvotes funktionierte in Chrome 28 OSX nicht für mich, wahrscheinlich weil sie nicht in OSX getestet wurde oder weil sie in 2008 funktioniert hat, als diese Frage beantwortet wurde.
Die Zeiten haben sich geändert und neue CSS3-Lösungen sind jetzt möglich. Meine Lösung verwendet Pseudoelemente , um ein benutzerdefiniertes Kontrollkästchen zu erstellen . Die Bestimmungen (Vor- oder Nachteile, wie auch immer Sie es betrachten) lauten also wie folgt:
Diese Lösung blendet das Kontrollkästchen aus und fügt der Beschriftung Pseudoelemente hinzu und formatiert sie, um das sichtbare Kontrollkästchen zu erstellen. Da das Etikett an das ausgeblendete Kontrollkästchen gebunden ist, wird das Eingabefeld weiterhin aktualisiert und der Wert wird mit dem Formular gesendet.
Und wenn Sie interessiert sind, sehen Sie hier meine Optionsfelder: http://jsfiddle.net/DtKrV/2/
Hoffe jemand findet das nützlich!
quelle
Ich hatte noch nie ein Problem damit:
quelle
Wenn Sie ASP.NET Web Forms verwenden, müssen Sie sich keine Gedanken über DIVs und andere Elemente oder feste Größen machen. Wir können den
<asp:CheckBoxList>
Text ausrichten, indemfloat:left
wir den Eingabetyp CheckboxList in CSS festlegen.Bitte überprüfen Sie den folgenden Beispielcode:
ASPX-Code:
quelle
Wenn Sie Twitter Bootstrap verwenden, können Sie die
checkbox
Klasse einfach für Folgendes verwenden<label>
:quelle
Mit einem Kontrollkästchen für den Eingabetyp, das in das Etikett eingewickelt ist und wie folgt nach links schwebt:
das hat bei mir funktioniert:
Stellen Sie sicher, dass die Höhe des mit der Linienhöhe des (Blocklevel) identisch ist.
quelle
Codieren Sie die Höhe und Breite des Kontrollkästchens fest, entfernen Sie die Polsterung und machen Sie die Höhe plus vertikale Ränder gleich der Zeilenhöhe des Etiketts. Wenn der Beschriftungstext inline ist, schweben Sie das Kontrollkästchen. Firefox, Chrome und IE7 + rendern das folgende Beispiel identisch: http://www.kornea.com/css-checkbox-align
quelle
quelle
Normalerweise lasse ich ein Kontrollkästchen unbeschriftet und mache dann seine "Beschriftung" zu einem separaten Element. Es ist ein Schmerz, aber es gibt so viele browserübergreifende Unterschiede zwischen der Anzeige von Kontrollkästchen und ihren Beschriftungen (wie Sie bemerkt haben), dass ich nur so annähernd steuern kann, wie alles aussieht.
Aus dem gleichen Grund mache ich dies auch in der Winforms-Entwicklung. Ich denke, das grundlegende Problem mit dem Kontrollkästchen-Steuerelement besteht darin, dass es sich tatsächlich um zwei verschiedene Steuerelemente handelt: das Kontrollkästchen und das Etikett. Wenn Sie ein Kontrollkästchen verwenden, überlassen Sie es den Implementierern des Steuerelements, zu entscheiden, wie diese beiden Elemente nebeneinander angezeigt werden (und sie verstehen es immer falsch, wobei falsch = nicht das, was Sie wollen).
Ich hoffe wirklich, dass jemand eine bessere Antwort auf Ihre Frage hat.
quelle
CSS:
HTML:
Der obige Code platziert Ihre Listenelemente in drei Elementen und ändert nur die Breite entsprechend.
quelle
Das Folgende sorgt für eine pixelgenaue Konsistenz über alle Browser hinweg, sogar über IE9:
Der Ansatz ist durchaus sinnvoll, bis er offensichtlich ist:
Dies führt zu einer global anwendbaren allgemeinen Regel:
Die Schriftgröße kann pro Formular, Feldsatz oder Element angepasst werden.
Getestet in den neuesten Versionen von Chrome, Safari und Firefox für Mac, Windows, Iphone und Android. Und IE9.
Diese Methode ist wahrscheinlich auf alle Eingabetypen anwendbar, die nicht höher als eine Textzeile sind. Wenden Sie eine entsprechende Typregel an.
quelle
Ich weiß also, dass dies schon oft beantwortet wurde, aber ich habe das Gefühl, dass ich eine elegantere Lösung habe als die, die bereits bereitgestellt wurden. Und nicht nur 1 elegante Lösung, sondern 2 separate Lösungen, die Sie begeistern werden. Alles, was Sie wissen und sehen müssen, ist in 2 JS Fiddles mit Kommentaren enthalten.
Lösung Nr. 1 basiert auf dem nativen "Kontrollkästchen" des angegebenen Browsers, allerdings mit einer Wendung ... Es ist in einem div enthalten, das sich browserübergreifend leichter positionieren lässt, mit einem Überlauf: versteckt, um den Überschuss eines 1px-gestreckten Kontrollkästchens zu beseitigen (Dies ist so, dass Sie die hässlichen Grenzen von FF nicht sehen können)
Einfache HTML: (folgen Sie dem Link , um die CSS mit Kommentaren zu überprüfen, ist Codeblock zu erfüllen Stackoverflow) http://jsfiddle.net/KQghJ/
Lösung 2 verwendet den "Checkbox Toggle Hack", um den CSS-Status eines DIVs umzuschalten, der im Browser ordnungsgemäß positioniert wurde, und mit einem einfachen Sprite für die deaktivierten und aktivierten Kontrollkästchen-Status einzurichten. Alles, was benötigt wird, ist die Anpassung der Hintergrundposition mit dem Checkbox Toggle Hack. Dies ist meiner Meinung nach die elegantere Lösung, da Sie mehr Kontrolle über Ihre Kontrollkästchen und Radios haben und garantieren können, dass sie im gesamten Browser gleich aussehen.
Einfaches HTML: (Folgen Sie dem Link, um das CSS mit Kommentaren zu überprüfen. Der Codeblock soll StackOverflow erfüllen.) Http://jsfiddle.net/Sx5M2/
Wenn jemand mit diesen Methoden nicht einverstanden ist, hinterlassen Sie mir bitte einen Kommentar. Ich würde gerne ein Feedback dazu hören, warum andere nicht auf diese Lösungen gestoßen sind, oder wenn ja, warum ich hier keine Antworten dazu sehe. Wenn jemand sieht, dass eine dieser Methoden fehlschlägt, wäre es auch schön, das zu sehen, aber diese wurden in den neuesten Browsern getestet und basieren auf HTML / CSS-Methoden, die ziemlich alt und meines Erachtens universell sind.
quelle
Yay danke! Auch das hat mich für immer verrückt gemacht.
In meinem speziellen Fall hat dies bei mir funktioniert:
Ich verwende die Datei reset.css, die einige der Unterschiede erklären könnte, aber dies scheint für mich gut zu funktionieren.
quelle
position: relative;
hat einige Probleme im IE mit Z-Index und Animationen wie jQuerys slideUp / slideDown.CSS:
jQuery:
Das Styling muss wahrscheinlich in Abhängigkeit von der verwendeten Schriftgröße angepasst werden
<label>
PS:
Ich benutze ie7js , damit das CSS in IE6 funktioniert.
quelle
Verwenden Sie einfach
vertical-align: sub
, wie Pokrishka bereits vorgeschlagen.Geige
HTML Quelltext:
CSS-Code:
quelle
Einfache Lösung:
Getestet in Chrome, Firefox, IE9 +, Safari, iOS 9+
quelle