Comment aligner les cases à cocher et leurs étiquettes de manière cohérente

C'est l'un des petits problèmes CSS qui me tourmente constamment. Comment les gens autour du débordement de pile s'alignent verticalement checkboxes et leur labels constamment "cross-browser ? Chaque fois que je les aligne correctement dans Safari (généralement en utilisant vertical-align: baseline sur le input ), ils sont complètement off dans Firefox et IE. Fixez-le dans Firefox, et Safari et IE sont inévitablement dérangés. Je perds mon temps là-dessus à chaque fois que je code un formulaire.

voici le code standard avec lequel je travaille:

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

j'utilise habituellement la réinitialisation D'Eric Meyer, donc les éléments de forme sont relativement propres des overrides. Hâte de tout conseils ou astuces que vous avez à offrir!

1539
demandé sur One Crayon 2008-11-20 21:02:01
la source

30 ответов

après plus d'une heure de retouches, de tests, et d'essais de différents styles de markup, je pense que je peux avoir une solution décente. Les exigences pour ce projet particulier étaient les suivantes:

  1. Entrées doivent être sur leur propre ligne.
  2. Les entrées de la case à cocher
  3. doivent être alignées verticalement avec le texte de l'étiquette de la même façon (sinon de façon identique) sur tous les navigateurs.
  4. si le texte de l'étiquette s'enroule, il doit être indenté (donc pas d'enroulement sous la case à cocher).

avant toute explication, je vais vous donner le code:

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>

Voici l'exemple de travail dans JSFiddle .

ce code suppose que vous utilisez une réinitialisation comme celle D'Eric Meyer qui n'outrepasse pas les marges d'entrée et le remplissage des formulaires (d'où la possibilité de réinitialiser les marges et le remplissage dans le CSS d'entrée). Évidemment, dans un environnement vivant, vous allez probablement nicher/surpasser des choses pour soutenir d'autres éléments d'entrée, mais je voulais garder les choses simples.

choses à noter:

  • la déclaration *overflow est un hack inline IE (le hack star-property). IE 6 et 7 le remarqueront, mais Safari et Firefox l'ignoreront correctement. Je pense qu'il pourrait être valide CSS, mais vous êtes encore mieux avec des commentaires conditionnels; juste utilisé pour simplicité.
  • comme le meilleur que je puisse dire, le seul énoncé vertical-align qui était uniforme dans tous les navigateurs était vertical-align: bottom . Le réglage de ceci et ensuite relativement le positionnement vers le haut s'est comporté presque identique dans Safari, Firefox et IE avec seulement un ou deux pixels de divergence.
  • le problème majeur dans le travail avec l'alignement est que C'est-à-dire colle un tas d'espace mystérieux autour des éléments d'entrée. Ce n'est pas du rembourrage ou de la marge, et c'est sacrément persistant. Fixer une largeur et une hauteur sur la case à cocher puis overflow: hidden pour une raison quelconque coupe l'espace supplémentaire et permet au positionnement D'IE d'agir très similaire à Safari et Firefox.
  • selon votre taille de texte, vous aurez sans doute besoin d'ajuster le positionnement relatif, la largeur, la hauteur, et ainsi de suite pour obtenir les choses à l'air juste.

Espérons que cela aide quelqu'un d'autre! Je n'ai pas essayé cette technique sur des projets autres que celui Je travaillais ce matin, donc ferme ta bouche si tu trouves quelque chose qui marche plus régulièrement.

925
répondu One Crayon 2016-08-06 01:54:58
la source

Parfois vertical-align besoin de deux inline (span, étiquette, entrée, etc...) éléments à côté de l'autre pour fonctionner correctement. Les cases à cocher suivantes sont correctement centrées verticalement dans IE, Safari, FF, et Chrome, même si la taille du texte est très petite ou grande.

ils flottent tous les uns à côté des autres sur la même ligne, mais le nowrap signifie que tout le texte de l'étiquette reste toujours à côté de la case à cocher.

l'inconvénient est la portée supplémentaire dénuée de sens balise.

.checkboxes label {
  display: block;
  float: left;
  padding-right: 10px;
  white-space: nowrap;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}
<form>
  <div class="checkboxes">
    <label for="x"><input type="checkbox" id="x" /> <span>Label text x</span></label>
    <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
    <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
  </div>
</form>

maintenant, si vous aviez un texte d'étiquette très long que avait besoin de pour envelopper sans envelopper sous la case à cocher, vous utiliseriez un rembourrage et un tiret de texte négatif sur les éléments d'étiquette:

.checkboxes label {
  display: block;
  float: left;
  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 for="x"><input type="checkbox" id="x" /> <span>Label text x</span></label>
    <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
    <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
  </div>
</form>
176
répondu Nathan Bowers 2016-08-06 01:58:04
la source
"151920920 de Travail" hors de Un Crayon à la solution de , j'ai quelque chose qui fonctionne pour moi et c'est plus simple:

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>

rend pixel-pour-pixel le même dans Safari (dont la ligne de base je crois) et à la fois Firefox et IE7 vérifier comme bon. Il fonctionne également pour différentes tailles de police d'étiquette, grandes et petites. Maintenant, pour fixer la ligne de base D'IE sur les sélections et les entrées...

159
répondu 4 revs, 3 users 44%anon 2017-05-23 15:10:42
la source

une chose facile qui semble bien fonctionner est d'appliquer un réglage de la position verticale de la case à cocher avec alignement vertical. Il sera toujours varier entre les navigateurs, mais la solution est simple.

input {
    vertical-align: -2px;
}

référence

121
répondu Frank Schwieterman 2015-07-30 13:09:55
la source

essayer vertical-align: middle

également votre code semble comme il devrait être:

<form>
    <div>
        <input id="blah" type="checkbox"><label for="blah">Label text</label>
    </div>
</form>
79
répondu digitalsanctum 2017-11-12 21:09:41
la source

essayer ma solution, je l'ai essayé dans IE 6, FF2 et Chrome et il rend pixel par pixel dans les trois navigateurs.

* {
  padding: 0px;
  margin: 0px;
}
#wb {
  width: 15px;
  height: 15px;
  float: left;
}
#somelabel {
  float: left;
  padding-left: 3px;
}
<div>
  <input id="wb" type="checkbox" />
  <label for="wb" id="somelabel">Web Browser</label>
</div>
36
répondu Waleed Eissa 2016-08-06 05:33:52
la source

la seule solution qui fonctionne parfaitement pour moi est:

input[type=checkbox], input[type=radio] {
    vertical-align: -2px;
    margin: 0;
    padding: 0;
}

testé aujourd'hui en Chrome, Firefox, Opera, IE 7 et 8. Exemple: Violon

24
répondu Buzogany Laszlo 2015-07-30 13:16:05
la source

j'utilise habituellement la hauteur de la ligne pour ajuster la position verticale de mon texte statique:

label {
  line-height: 18px;
}
input {
  width: 13px;
  height: 18px;
  font-size: 12px;
  line-height: 12px;
}
<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

Espère que ça aide.

17
répondu Plan B 2016-08-06 05:38:06
la source

Je n'ai pas complètement testé ma solution, mais elle semble bien fonctionner.

mon HTML est simplement:

<label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label>

j'ai ensuite réglé toutes les cases à cocher sur 24px pour la hauteur et la largeur. Pour faire le texte aligné je fais l'étiquette line-height aussi 24px et assigner vertical-align: top; comme ainsi:

EDIT: Après IE test, j'ai ajouté vertical-align: bottom; à l'entrée et changé l'étiquette du CSS. Vous peut trouver que vous avez besoin d'un cas conditionnel IE css pour trier capitonnage - mais le texte et la boîte sont en ligne.

input[type="checkbox"] {
    width: 24px;
    height: 24px;
    vertical-align: bottom;
}
label.checkbox {
    vertical-align: top;
    line-height: 24px;
    margin: 2px 0;
    display: block;
    height: 24px;
}

si quelqu'un découvre que cela ne fonctionne pas, veuillez me le faire savoir. Voici en action (dans Chrome et IE - apologies comme screenshots ont été prises sur retina et en utilisant des parallèles pour IE):

screenshot of checkboxes: Chrome screenshot of checkboxes: IE

12
répondu Patrick 2013-07-30 01:51:53
la source

je pense que c'est la façon la plus facile

input {
    position: relative;
    top: 1px;
}

Violon

10
répondu gidzior 2015-11-12 08:41:16
la source

cela fonctionne bien pour moi:

fieldset {
  text-align:left;
  border:none
}
fieldset ol, fieldset ul {
  padding:0;
  list-style:none
}
fieldset li {
  padding-bottom:1.5em;
  float:none;
  clear:left
}
label {
  float:left;
  width:7em;
  margin-right:1em
}
fieldset.checkboxes li {
  clear:both;
  padding:.75em
}
fieldset.checkboxes label {
  margin:0 0 0 1em;
  width:20em
}
fieldset.checkboxes input {
  float:left
}
<form>
  <fieldset class="checkboxes">
    <ul>
      <li>
        <input type="checkbox" name="happy" value="yep" id="happy" />
        <label for="happy">Happy?</label>
      </li>
      <li>
        <input type="checkbox" name="hungry" value="yep" id="hungry" />
        <label for="hungry">Hungry?</label>
      </li>
    </ul>
  </fieldset>
</form>
9
répondu dylanfm 2016-08-06 05:40:54
la source

Je n'aime pas le positionnement relatif parce qu'il fait l'élément rendu au-dessus de tout le reste à son niveau (il peut obtenir quelque chose si vous avez la disposition complexe).

j'ai découvert que vertical-align: sub rend les cases à cocher assez bien alignées en Chrome, Firefox et Opera. Je ne peux pas vérifier le Safari puisque je n'ai pas de MacOS et IE10 est légèrement off, mais je l'ai trouvé pour être assez bonne solution pour moi.

une Autre solution pourrait être d'essayer et créer des CSS spécifiques pour chaque navigateur et les affiner avec un certain alignement vertical en % / pixels/EMs: http://css-tricks.com/snippets/css/browser-specific-hacks /

8
répondu pokrishka 2014-11-06 16:59:37
la source

maintenant que flexbox est pris en charge dans tous les navigateurs modernes, quelque chose comme cela semble comme une approche plus facile pour moi.

<style>
label {
  display: flex;
  align-items: center;
}
input[type=radio], input[type=checkbox]{
  flex: none;
}
</style>
<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>



voici la version complète préfixée Démo:

label {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}
input[type=radio], 
input[type=checkbox] {
	-webkit-box-flex: 0;
	-webkit-flex: none;
	-ms-flex: none;
	flex: none;
	margin-right: 10px; 
}
/* demo only (to show alignment) */
form {
  max-width: 200px
}
<form>
  <label>
    <input type="radio" checked>
    I am an aligned radio and label
  </label>
  <label>
      <input type="checkbox" checked>
    I am an aligned checkbox and label
  </label>
</form>
8
répondu Bryan Willis 2016-07-25 02:53:35
la source

Je n'ai jamais eu de problème à le faire comme ça:

<form>
  <div>
    <input type="checkbox" id="cb" /> <label for="cb">Label text</label>
  </div>
</form>
7
répondu John Topley 2008-11-20 22:52:48
la source

je voulais juste ajouter à la discussion sur l'attribut "for" sur les étiquettes (légèrement offtopic):

veuillez le fournir, même si ce n'est pas nécessaire, car il est très pratique à utiliser à partir de javascript:

var label = ...
var input = document.getElementById(label.htmlFor);

C'est beaucoup plus pratique que d'essayer de comprendre si l'étiquette a l'entrée imbriqués, ou si l'entrée est avant de l'étiquette, ou après.. etc. Et ça ne fait jamais de mal de le fournir.. si.

juste mes 2 cents.

6
répondu Stijn 2009-06-19 15:46:13
la source

si vous utilisez ASP.NET Web Forms vous ne devez pas vous soucier de DIVs et d'autres éléments ou des tailles fixes. Nous pouvons aligner le texte <asp:CheckBoxList> en mettant float:left sur le type d'entrée CheckboxList dans CSS.

veuillez cocher le code d'exemple suivant:

.CheckboxList
{
    font-size: 14px;
    color: #333333;
}
.CheckboxList input
{
    float: left;
    clear: both;
}

.Code ASPX:

<asp:CheckBoxList runat="server" ID="c1" RepeatColumns="2" CssClass="CheckboxList">
</asp:CheckBoxList>
6
répondu Rama Subba Reddy M 2013-07-30 01:30:25
la source

la réponse choisie avec 400 + upvotes n'a pas fonctionné pour moi dans Chrome 28 OSX, probablement parce qu'il n'a pas été testé dans OSX ou qu'il a fonctionné dans ce qui était autour en 2008 quand cette question a été répondue.

les temps ont changé, et de nouvelles solutions CSS3 sont maintenant réalisables. Ma solution utilise pseudoelements pour créer une case à cocher . Donc les stipulations (pour ou contre, peu importe comment vous le regardez) sont les suivantes::

  • fonctionne uniquement sur les navigateurs modernes (FF3.6+, IE9+, Chrome, Safari)
  • S'appuie sur une case à cocher conçue sur mesure, qui sera rendue exactement la même dans chaque navigateur/système D'exploitation. Ici, j'ai choisi quelques couleurs simples, mais vous pouvez toujours ajouter des dégradés linéaires et tel pour lui donner plus d'un coup.
  • est adapté à une certaine taille de police / police, qui si changé, vous changeriez simplement le positionnement et la taille de la case à cocher en faire apparaître alignés verticalement. S'il est modifié correctement, le résultat final devrait toujours être proche de exactement le même dans tous les navigateurs / systèmes d'exploitation.
  • Non à la verticale-propriétés d'alignement, pas de chars
  • doit utiliser le balisage fourni dans mon exemple, il ne fonctionnera pas si structuré comme la question, cependant, la mise en page sera essentiellement la même. Si vous voulez déplacer les choses autour, vous devrez également déplacer le CSS associé

votre HTML:

<form>
    <div class="checkbox">
        <input id="check_me" type=checkbox />
        <label for="check_me">Label for checkbox</label>
    </div>
</form>

votre CSS:

div.checkbox {
    position: relative;
    font-family: Arial;
    font-size: 13px;
}
label {
    position: relative;
    padding-left: 16px;
}
label::before {
    content :"";
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: white;
    border: solid 1px #9C9C9C;
    position: absolute;
    top: 1px;
    left: 0px;
}
label::after {
    content:"";
    width: 8px;
    height: 8px;
    background-color: #666666;
    position: absolute;
    left: 2px;
    top: 3px;
    display: none;
}
input[type=checkbox] {
    visibility: hidden;
    position: absolute;
}
input[type=checkbox]:checked + label::after {
    display: block;
}
input[type=checkbox]:active + label::before {
    background-color: #DDDDDD;
}

Cette solution cache la case à cocher , et ajoute et décline des pseudoéléments à l'étiquette pour créer la case à cocher visible. Parce que l'étiquette est liée à la case à cocher cachée, le champ d'entrée sera toujours mis à jour et la valeur sera soumise avec le formulaire.

jsFiddle: http://jsfiddle.net/SgXYY/6 /

et si vous êtes intéressé, voici mon point de vue sur les boutons radio: http://jsfiddle.net/DtKrV/2 /

Espère que quelqu'un trouve cette pratique!

5
répondu MusikAnimal 2018-01-25 11:40:53
la source
<form>
    <div>
        <label style="display: inline-block">
            <input style="vertical-align: middle" type="checkbox" />
            <span style="vertical-align: middle">Label text</span>
         </label>
    </div>
</form>

le truc est d'utiliser vertical-align uniquement dans les cellules de tableau ou inline-block si l'utilisation étiquette.

4
répondu Carlo Pires 2011-09-02 02:31:07
la source

si vous utilisez Twitter Bootstrap, vous pouvez simplement utiliser la classe checkbox sur le <label> :

<label class="checkbox">
    <input type="checkbox"> Remember me
</label>
4
répondu Sunil D. 2013-04-06 22:31:35
la source

cochez la hauteur et la largeur de la case à cocher, retirez son rembourrage et faites en sorte que sa hauteur plus les marges verticales soient égales à la hauteur-ligne de l'étiquette. Si le texte de l'étiquette est en ligne, cochez la case. Firefox, Chrome et IE7+ rendent tous l'exemple suivant identique: http://www.kornea.com/css-checkbox-align

4
répondu user2407309 2014-08-09 16:37:28
la source

avec une case à cocher de type entrée enveloppée à l'intérieur de l'étiquette et flottée vers la gauche comme suit:

<label for="id" class="checkbox">
    <input type="checkbox" id="id">
    <span>The Label</span>
</label>

cela a fonctionné pour moi:

label.checkbox {
    display: block;
}
.checkbox input {
    float: left;
    height: 18px;
    vertical-align: middle;
}
.checkbox span {
    float: left;
    line-height: 18px;
    margin: 0 0 0 20px;
}

s'assurer que la hauteur du est identique à la ligne-hauteur du (niveau bloc) .

3
répondu Matijs 2013-12-29 14:07:07
la source

input[type=checkbox]
{
    vertical-align: middle;
} 
<input id="testCheckbox" name="testCheckbox" type="checkbox">
<label for="testCheckbox">I should align</label>
3
répondu Prime 2017-06-14 00:43:48
la source

je laisse habituellement une case à cocher ouverte et je fais ensuite de son" étiquette " un élément distinct. C'est une douleur, mais il y a tellement de différence entre les navigateurs entre la façon dont les cases à cocher et leurs étiquettes sont affichées (comme vous l'avez remarqué) que c'est la seule façon dont je peux être proche de contrôler l'apparence de tout.

je finis aussi par le faire dans winforms développement, pour la même raison. Je pense que le problème fondamental avec le contrôle de la case à cocher est qu'il est vraiment deux les différents contrôles: la boîte et l'étiquette. En utilisant une case à cocher, vous laissez aux responsables de la mise en œuvre du contrôle le soin de décider comment ces deux éléments sont affichés l'un à côté de l'autre (et ils se trompent toujours, où tort = pas ce que vous voulez).

j'espère vraiment que quelqu'un aura une meilleure réponse à votre question.

2
répondu MusiGenesis 2008-11-20 21:24:46
la source

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>

le code ci-dessus placera vos articles de liste dans trois outils et juste changer les largeurs pour convenir.

2
répondu Philip Bevan 2013-12-29 14:08:17
la source

utiliser simplement vertical-align: sub , comme pokrishka déjà suggéré.

Violon

code HTML:

<div class="checkboxes">
    <label for="check1">Test</label>
    <input id="check1" type="checkbox"></input>
</div>

Code CSS:

.checkboxes input {
    vertical-align: sub;
}
2
répondu Marco Sulla 2017-05-23 15:26:27
la source

donc je sais que cela a été répondu plusieurs fois, mais je sens que j'ai une solution beaucoup plus élégante que ceux qui ont été fournis déjà. Et non seulement 1 solution élégante, mais 2 solutions séparées pour chatouiller votre fantaisie. Cela dit, tout ce que vous devez savoir et voir sont contenues dans 2 JS Fiddle, avec des commentaires.


la Solution #1 s'appuie sur la "case à cocher" native du navigateur donné, mais avec une touche... Son contenu dans un div qui est plus facile à positionner cross-browser, avec un débordement: caché pour couper l'excès d'une case à cocher étirée de 1px (c'est pour que vous ne voyiez pas les bordures laides de FF)

simple HTML: (suivre le lien pour examiner la css avec des commentaires, le bloc de code est de satisfaire stackoverflow) http://jsfiddle.net/KQghJ /

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

État CSS D'un DIV, qui a été correctement positionné à travers le navigateur, et la configuration avec un sprite simple pour la case à cocher non vérifié et vérifié États. Tout ce qui est nécessaire est d'ajuster la position d'arrière-plan avec ladite case à cocher Hack. Ceci, à mon avis, est la solution plus élégante que vous avez plus de contrôle sur vos boîtes à cocher & radios, et peut garantir qu'ils regardent la même à travers le navigateur.

HTML simple: (suivre le lien pour examiner la CSS avec des commentaires), code bloc doit satisfaire StackOverflow) http://jsfiddle.net/Sx5M2 /

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

si quelqu'un n'est pas d'accord avec ces méthodes, veuillez me laisser un commentaire, j'aimerais entendre des commentaires sur les raisons pour lesquelles d'autres n'ont pas trouvé ces solutions, ou s'ils l'ont fait, pourquoi je ne vois aucune réponse ici à leur sujet? Si quelqu'un voit une de ces méthodes échouent, il serait agréable de voir que trop, mais ils ont été testés dans les navigateurs les plus récents et s'appuient sur des méthodes HTML / CSS qui sont assez anciennes, et universelles autant que je l'ai vu.

2
répondu NinjaKC 2018-01-25 11:40:08
la source

merci! Ça aussi me rend dingue depuis toujours.

Dans mon cas particulier, cela a fonctionné pour moi:

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

j'utilise la réinitialisation.css qui pourrait expliquer certaines de ces différences, mais cela semble bien fonctionner pour moi.

1
répondu 3 revs, 3 users 57%Jeff 2013-12-29 14:10:36
la source
<fieldset class="checks">
    <legend>checks for whatevers</legend>
    <input type="" id="x" />
    <label for="x">Label</label>
    <input type="" id="y" />
    <label for="y">Label</label>
    <input type="" id="z" />
    <label for="z">Label</label>
</fieldset>

vous devriez envelopper les contrôles de forme groupés ensemble dans leurs propres fieldsets de toute façon, ici, il joue le wrappa. définir input / label afficher: bloc, input float left, label float right, définir vos largeurs, contrôler l'espacement avec les marges Gauche/Droite, aligner le texte de l'étiquette en conséquence.

donc

fieldset.checks {
    width:200px
}
.checks input, .checks label {
    display:block;
}
.checks input {
    float:right;
    width:10px;
    margin-right:5px
}
.checks label {
    float:left;
    width:180px;
    margin-left:5px;
    text-align:left;
    text-indent:5px
}

vous avez probablement besoin de mettre la bordure, le contour et la hauteur de ligne sur les deux ainsi que pour les solutions de navigateur/média.

1
répondu albert 2013-12-29 14:12:19
la source

position: relative; a quelques problèmes dans IE avec z-index et des animations comme slideUp/slideDown de jQuery.

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');
    }
});

le style doit probablement être modifié en fonction de la taille de police utilisée dans <label>

PS:

J'utilise ie7js pour faire le travail css dans IE6.

1
répondu Bob Fanger 2013-12-29 14:14:08
la source

ce qui suit donne une cohérence parfaite entre les navigateurs, même IE9:

L'approche est tout à fait raisonnable, au point d'être évident:

  1. Créer une entrée et une étiquette.
  2. les afficher comme bloc, de sorte que vous pouvez les faire flotter comme vous le souhaitez.
  3. régler la hauteur et la hauteur de la ligne à la même valeur pour s'assurer qu'elles sont centrées et alignées verticalement.
  4. pour em mesures, pour calculer la hauteur des éléments, le navigateur doit connaître la hauteur de la police pour ces éléments, et il ne doit pas être lui-même défini dans les mesures em.

il en résulte une règle générale applicable à l'échelle mondiale:

input, label {display:block;float:left;height:1em;line-height:1em;}

avec taille de police adaptable par forme, champ ou élément.

#myform input, #myform label {font-size:20px;}

testé dans les derniers Chrome, Safari, et Firefox sur Mac, Windows, Iphone, et Android. Et IE9.

cette méthode est probablement applicable à tous les types de saisie qui ne sont pas supérieurs à une ligne de texte. Appliquer une règle de type pour convenir.

1
répondu Henrik Erlandsson 2015-09-16 17:08:19
la source

Autres questions sur html css cross-browser alignment html-form