如何对齐复选框及其标签始终跨浏览器

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

#1 楼

警告！这个答案太旧了，无法在现代浏览器上使用。

我不是这个答案的发布者，但是在撰写本文时，这是迄今为止迄今为止票数最高的答案正票和负票（+1035 -17），并且仍被标记为已接受的答案（可能是因为问题的原始发帖者是撰写此答案的人）。
正如评论中已经多次提到的那样，答案不再适用于大多数浏览器（自2013年以来似乎一直没有这样做）。

经过一个多小时的调整，测试和尝试不同样式的标记，我想一个体面的解决方案。此特定项目的要求是：

输入必须在自己的行上。
复选框输入需要在所有浏览器中以相似的方式（如果不一致）垂直于标签文本对齐。 />如果标签文字自动换行，则需要缩进（因此不要在复选框下方自动换行）。

在进行任何解释之前，我只给您提供代码：

 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> 

这是JSFiddle中的工作示例。
此代码假定您正在使用像Eric Meyer一样的重置，该重置不会覆盖表单输入的边距和填充（因此将边距和填充重置在输入CSS中）。显然，在实际环境中，您可能会嵌套/覆盖东西以支持其他输入元素，但我想让事情保持简单。
注意事项：

*overflow声明是内联的IE hack（星属性hack）。 IE 6和7都会注意到它，但是Safari和Firefox将适当地忽略它。我认为这可能是有效的CSS，但条件注释会更好。只是为了简单起见。
尽我所知，跨浏览器唯一一致的vertical-align语句是vertical-align: bottom。设置此值然后相对向上定位在Safari，Firefox和IE中几乎相同，只有一个或两个像素的差异。
对齐中的主要问题是IE在输入元素周围粘了很多神秘的空间。它不是填充或边距，而是该死的持久性。在复选框上设置宽度和高度，然后出于某种原因设置overflow: hidden可以减少额外的空间，并允许IE的定位与Safari和Firefox非常相似。
根据您的文本大小，毫无疑问，您需要进行调整相对位置，宽度，高度等等，以使事物看起来正确。

希望这对其他人有帮助！除了今天早上正在研究的项目之外，我没有在其他项目上尝试过这种特定技术，因此，如果您发现有更一致的方法，请务必进行尝试。

警告！这个答案太旧了，不适用于现代浏览器。

#2 楼

有时，垂直对齐需要两个相邻的内联元素（跨度，标签，输入等）才能正常工作。即使文本大小非常小，以下复选框也可以在IE，Safari，FF和Chrome中正确垂直居中。

它们都在同一行上彼此相邻浮动，但是nowrap意味着整个标签文本始终位于复选框旁边。

缺点是多余的无意义的SPAN标签。

 .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 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> 

现在，如果您有一个很长的标签文本，需要在复选框下不进行换行就进行换行，则可以在标签元素上使用填充和负文本缩进：

 .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 for="x"><input type="checkbox" id="x" /> <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 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> 

#3 楼

在One Crayon解决方案的基础上，我有一些对我有用且更简单的方法：

 .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> 

在Safari（我相信其基准）中以像素为单位呈现相同的像素，而Firefox和IE7都可以正常显示。它也适用于各种大小的标签字体。现在，为了在选择和输入上固定IE的基准...


更新：（第三方编辑）

正确的bottom位置取决于字体家族和字体大小！我发现对复选框和单选元素使用bottom: .08em;是一个很好的常规值。我在带有Arial和Calibri字体的Windows中的Chrome / Firefox / IE11中使用几种小/中/大字体大小对其进行了测试。

 .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> 

#4 楼

看起来很有效的一件简单事情是应用vertical-align调整复选框的垂直位置。仍然会因浏览器而异，但解决方案并不复杂。

 input {
    vertical-align: -2px;
}
 

参考

#5 楼

尝试vertical-align: middle

您的代码也应该是：

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

#6 楼

尝试我的解决方案，我在IE 6，FF2和Chrome中进行了尝试，并且它在所有三种浏览器中都逐像素渲染。

 * {
  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> 

#7 楼

对我来说，唯一完美的解决方案是：

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

今天在Chrome，Firefox，Opera，IE 7和8中进行了测试。示例：Fiddle

#8 楼

我还没有完全测试我的解决方案，但是它似乎很好用。

我的HTML很简单：

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

然后将所有复选框的高度和宽度都设置为24px。为了使文本对齐，我将标签的line-height也设置为24px并分配vertical-align: top;，如下所示：

编辑：IE测试后，我在输入中添加了vertical-align: bottom;并更改了标签的CSS。您可能会发现需要一个条件IE css大小写来整理填充-但文本和框是内联的。

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

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

如果有人发现这行不通，请告诉我。这是实际的操作（在Chrome和IE中-道歉，因为截图是在视网膜上拍摄的，并为IE使用了并行）：

#9 楼

我通常使用行高来调整静态文本的垂直位置：

 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> 

希望有所帮助。

#10 楼

现在所有现代浏览器都支持flexbox，对我来说，这样的方法似乎更简单。

<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>

这是完整的前缀版本演示：

 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> 

#11 楼

最后，让我们看一下问题的根源。

复选框是使用图像渲染的（可以通过CSS设置自定义复选框）。这是FireFox中的一个（未选中的）复选框，以DOM检查器突出显示：



这是Chrome中相同的未样式化复选框：



您可以看到边距（橙色）；填充不存在（将显示为绿色）。那么，复选框右侧和底部的伪利润是多少？这些是用于复选框的图像的一部分。这就是为什么仅使用vertical-align: middle仍然不够用，而这正是跨浏览器问题的根源。

那么我们该怎么办？

一个明显的选择是–替换图像！幸运的是，可以通过CSS做到这一点，并将其替换为外部图像，base64（in-CSS）图像，in-CSS svg或仅是伪元素。这是一种健壮的（跨浏览器！）方法，下面是从该问题中窃取此类调整的示例：

 .checkbox-custom {
  opacity: 0;
  position: absolute;
}
.checkbox-custom,
.checkbox-custom-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.checkbox-custom + .checkbox-custom-label:before {
  content: '';
  display: inline-block;
  background: #fff;
  border-radius: 5px;
  border: 2px solid #ddd;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  padding: 2px;
  margin-right: 10px;
  text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
  width: 1px;
  height: 5px;
  border: solid blue;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  border-radius: 0px;
  margin: 0px 15px 5px 5px;
} 

 <div>
  <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
  <label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
</div>
<div>
  <input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
  <label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
</div> 

您可能想阅读一些有关这种样式的更深入的文章，例如此处列出的一些文章；

好吧，那没有自定义图像或伪元素的解决方案呢？

TL; DR：看起来像这样赢了不起作用，请改用自定义复选框

首先，请注意，如果在其他浏览器中，复选框图标内的伪边距是任意的，则没有一致的解决方案。要构建一个图像，我们必须在现有浏览器中探索此类图像的解剖结构。

那么哪些浏览器的复选框中有伪边距？我已经检查了Chrome 75，Vivaldi 2.5（基于铬），FireFox 54（不要问为什么这样过时），IE 11，Edge 42，Safari ?? （借用一分钟，忘了签出版本）。只有Chrome和Vivaldi才有这样的伪利润（我怀疑所有基于Chromium的浏览器也一样，例如Opera）。

这些伪利润的大小是多少？要弄清楚这一点，可以使用缩放复选框：

 input {
  zoom: 10;
  box-shadow: 0 0 1px inset #999;
} 

 <input type=checkbox> 

我的结果是宽度/高度的〜7％，因此绝对单位为0.9-1.0px。但是，准确性可能会受到质疑：请为复选框尝试不同的zoom值。在Chrome和Vivaldi的测试中，伪距的相对大小在zoom的值10、20和值11-19（??）上有很大的不同：




scale似乎更一致：

 input {
  transform: scale(10) translate(50%, 50%);
  box-shadow: 0 0 1px inset #999;
} 

 <input type=checkbox> 

所以大概14％和2px是正确的值。

现在我们知道（？）伪保证金的大小，请注意一下是不足够的。所有浏览器的复选框图标的大小都一样吗？唉! DOM检查器显示的是未设置样式的复选框：


FireFox：13.3px

基于铬的元素：整个元素为12.8px，因此为12.8px（100％- 14％）= 11像素（在视觉上被视为复选框）
IE 11，边缘：13像素


现在，在讨论任何解决方案或技巧之前，让我们问：什么是正确的对齐方式？我们要达到什么目标？在某种程度上，这是一个问题，但是基本上我可以想到以下“不错”的对齐方式：

文本和复选框位于同一基线上（我故意不在此处调整复选框的大小） ：



或具有相同的小写字母中间行：



或具有相同中间行用大写字母表示（更容易看到不同字体大小的差异）：



，我们还必须确定复选框的大小是否应相等到小写字母，大写字母或其他大小（更大，更小或介于小写字母和大写字母之间）的高度。对于此讨论，如果复选框与文本，并且具有大写字母的大小（一个极具争议的选择）：



现在我们必须使用哪些工具：


调整复选框的大小
通过伪数学识别铬选中复选框并设置特定样式
调整复选框/标签垂直对齐方式

？



关于复选框大小调整：有width ，height，size，zoom，scale（我错过了什么吗？）。 zoom和scale不允许设置绝对大小，因此它们可能仅有助于调整文本大小，而不能设置跨浏览器大小（除非我们可以编写特定于浏览器的规则）。 size不能与Chrome一起使用（它是否可以与旧版IE一起使用？无论如何，它不是很有趣）。 width和height可在Chrome和其他浏览器中使用，因此我们可以设置一个通用的尺寸，但是同样，在Chrome中，它设置整个图像的尺寸，而不是复选框本身。注意：它是最小的（宽度，高度），它定义了复选框的大小（如果宽度≠高度，则复选框正方形外部的区域将添加到“伪边距”中）。

不幸的是，据我所知，Chrome浏览器中的伪边距对于任何宽度和高度都没有设置为零。

恐怕没有可靠的CSS现在只有一种方法。

让我们考虑垂直对齐。由于Chrome的伪边距，将vertical-align设置为middle或baseline时无法给出一致的结果，对于所有浏览器，获得相同“坐标系”的唯一实际选择是对齐标签并输入到top：



（上图：垂直对齐：顶部，底部和底部没有框阴影）


那么我们会得到什么结果从这里得到？

 input[type="checkbox"] {
    height: 0.95em;
    width: 0.95em;
}
label, input {
    vertical-align: top;
} 

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

上面的代码段适用于Chrome（基于Chromium的浏览器），但其他浏览器需要较小的复选框。似乎无法以Chromium复选框图像怪异的方式调整尺寸和垂直对齐方式。我的最终建议是：改用自定义复选框-这样可以避免感到沮丧：)

#12 楼

 <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> 

诀窍是仅在使用标签标记的表单元格或内联块中使用垂直对齐。

#13 楼

我认为这是最简单的方法

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

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

#14 楼

我不喜欢相对定位，因为它使元素呈现在其所有其他元素之上（如果您具有复杂的布局，它可以位于某物之上）。

我发现vertical-align: sub使复选框看起来像与Chrome，Firefox和Opera保持一致。由于我没有MacOS，并且IE10略微关闭，因此无法检查Safari，但我发现它对我来说已经足够了。

另一个解决方案可能是尝试制作特定的CSS对于每种浏览器，并以％/ pixels / EMs进行一些垂直对齐来对其进行微调：
http://css-tricks.com/snippets/css/browser-specific-hacks/

#15 楼

这对我很有效：

 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> 

#16 楼

选择的具有400多个投票的答案在Chrome 28 OSX中对我不起作用，可能是因为它没有在OSX中进行测试，或者它在2008年回答该问题时都可以使用。

时代变了，新的CSS3解决方案现在是可行的。我的解决方案使用伪元素创建自定义复选框。因此，规定（利弊，无论您如何看）如下：


仅适用于现代浏览器（FF3.6 +，IE9 +，Chrome，Safari）
依赖于自定义设计的复选框，该复选框将在每个浏览器/ OS中完全相同地呈现。在这里，我只是选择了一些简单的颜色，但是您总是可以添加线性渐变，这样就可以给它带来更多的爆炸效果。
适应于特定的字体/字体大小，如果更改，您只需更改复选框的位置和大小，以使其垂直对齐。如果正确调整，则最终结果在所有浏览器/操作系统中仍应接近完全相同。
没有垂直对齐属性，没有浮点数
在我的示例中必须使用提供的标记，它不会如果结构像问题一样有效，则布局基本上看起来是相同的。如果要四处移动，还必须移动关联的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;
} 

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

此解决方案隐藏了该复选框，并在标签上添加了伪元素并为其设置样式以创建可见的复选框。因为标签与隐藏的复选框绑定在一起，所以输入字段仍将更新，并且值将与表单一起提交。

如果您有兴趣，这是我对单选按钮的看法：http ：//jsfiddle.net/DtKrV/2/

希望有人觉得这有用！

#17 楼

我从来没有遇到过这样的问题：

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

#18 楼

如果使用ASP.NET Web窗体，则无需担心DIV和其他元素或固定大小。我们可以通过在CSS中将<asp:CheckBoxList>设置为CheckboxList输入类型来对齐float:left文本。

请检查以下示例代码：

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

.ASPX代码：

<asp:CheckBoxList runat="server" ID="c1" RepeatColumns="2" CssClass="CheckboxList">
</asp:CheckBoxList>

#19 楼

如果您使用的是Twitter Bootstrap，则可以仅使用checkbox上的<label>类：

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

#20 楼

输入法复选框包裹在标签内并浮动到左侧，如下所示：

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

这对我有用：

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

请确保的高度与（块级）的行高。

#21 楼

对复选框的高度和宽度进行硬编码，删除其填充，并使其高度加上垂直边距等于标签的行高。如果标签文本是嵌入式的，请选中该复选框。 Firefox，Chrome和IE7 +均以相同的方式呈现以下示例：http://www.kornea.com/css-checkbox-align

#22 楼

 input[type=checkbox]
{
    vertical-align: middle;
}  

 <input id="testCheckbox" name="testCheckbox" type="checkbox">
<label for="testCheckbox">I should align</label> 

#23 楼

我通常会保留一个未标记的复选框，然后使其“标签”成为一个单独的元素。这很痛苦，但是复选框和标签的显示方式之间存在很大的跨浏览器差异（如您所注意到的），这是我接近控制一切外观的唯一方法。

出于同样的原因，我最终还是在winforms开发中这样做。我认为复选框控件的根本问题在于它实际上是两个不同的控件：框和标签。通过使用复选框，您可以将其留给控件的实现者决定如何将这两个元素彼此相邻显示（并且它们总是会出错，哪里出错=不是您想要的）。

我真的希望有人对你的问题有更好的答案。

#24 楼

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>
 

上面的代码将您的列表项放置在Threecols中，只是更改宽度以适合。

#25 楼

下面给出了跨浏览器甚至IE9的像素完美一致性：

这种方法非常明智，以至于显而易见：


创建输入并标签。
将它们显示为块，以便您可以随意浮动它们。
将高度和行高设置为相同的值，以确保它们居中并垂直对齐。
对于em尺寸，要计算元素的高度，浏览器必须知道这些元素的字体高度，并且本身不能在em尺寸中进行设置。

这将导致全球通用规则：

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

字体大小可根据表单，字段集或元素进行调整。

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

最新测试Mac，Windows，Iphone和Android上的Chrome，Safari和Firefox。和IE9。

此方法可能适用于所有不超过一行文本的输入类型。应用适合的类型规则。

#26 楼

所以我知道这个问题已经被回答了很多次，但是我觉得我有一个比已经提供的解决方案更优雅的解决方案。不仅有1种优雅的解决方案，而且还有2种单独的解决方案让您喜欢。话虽如此，您需要了解和看到的所有内容都包含在2个JS Fiddle的注释中。


解决方案＃1依赖于给定浏览器的本机“复选框”，尽管一个扭曲...它包含在一个div中，它更易于定位跨浏览器，并带有溢出：隐藏以隐藏多余的1px拉伸复选框（这样您就无法看到FF的丑陋边框）

简单的HTML ：（单击链接以查看带有注释的css，代码块将满足stackoverflow）http://jsfiddle.net/KQghJ/

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

解决方案2使用“ Checkbox Toggle Hack”切换DIV的CSS状态（已在浏览器中正确定位），并为该复选框的未选中状态和已选中状态设置了简单的sprite。所有需要做的就是用所说的Checkbox Toggle Hack调整背景位置。我认为，这是一种更为优雅的解决方案，因为您可以更好地控制复选框和收音机，并可以确保它们在浏览器中看起来一样。

简单的HTML ：（请点击链接查看带有注释的CSS，代码块应满足StackOverflow）http://jsfiddle.net/Sx5M2/

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

如果有人不同意这些方法，请给我留下评论，我很想听听一些关于为什么其他人没有遇到这些解决方案的反馈，或者，如果有，为什么我在这里看不到关于它们的答案？如果有人看到其中一种方法失败了，也很高兴看到这些方法，但是这些方法已经在最新的浏览器中进行了测试，并且依赖于我所见过的非常古老且通用的HTML / CSS方法。 />

#27 楼

是的，谢谢！这也一直让我发疯。

在我的特定情况下，这对我有用：

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

我使用的reset.css可能解释了其中的一些差异，但这对我来说似乎很好。

#28 楼

position: relative;在IE中使用z-index和动画存在一些问题，例如jQuery的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');
    }
});
 

样式可能需要调整，具体取决于<label>中使用的字体大小。

PS：
我使用ie7js使css在IE6中工作。

#29 楼

只需按照pokrishka的建议使用vertical-align: sub。

提琴手
HTML代码：

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

CSS代码：

.checkboxes input {
    vertical-align: sub;
}

#30 楼

简单的解决方案：

<label style="display:block">
  <input style="vertical-align:middle" type="checkbox">
  <span  style="vertical-align:middle">Label</span>
</label>

在Chrome，Firefox，IE9 +，Safari，iOS 9+中进行了测试