如何跨浏览器一致地对齐复选框及其标签

StackOverflow https://stackoverflow.com/questions/306252

题

这是经常困扰我的 CSS 小问题之一。Stack Overflow 周围的人如何垂直对齐 checkboxes 和他们的 labels 始终如一地 跨浏览器？每当我在 Safari 中正确对齐它们时（通常使用 vertical-align: baseline 于 input），它们在 Firefox 和 IE 中完全关闭。在 Firefox 中修复它，Safari 和 IE 不可避免地会混乱。每次编写表单时我都会在这方面浪费时间。

这是我使用的标准代码：

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

我通常使用 Eric Meyer 的重置，因此表单元素的覆盖相对干净。期待您提供任何提示或技巧！

有帮助吗？

解决方案

经过一个多小时的调整、测试和尝试不同样式的标记后，我想我可能有一个不错的解决方案。这个特定项目的要求是：

  1. 输入必须在自己的行上。
  2. 在所有浏览器中，复选框输入需要与标签文本类似（如果不相同）垂直对齐。
  3. 如果标签文本换行，则需要缩进（因此复选框下方不会换行）。

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

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 非常相似。
  • 根据您的文本大小，您无疑需要调整相对位置、宽度、高度等以使内容看起来正确。

希望这对其他人有帮助！除了我今天早上正在做的项目之外，我还没有在任何项目上尝试过这种特定的技术，所以如果你发现一些更一致的东西，一定要加油。

其他提示

有时，垂直对齐需要两个彼此相邻的内联（跨度、标签、输入等）元素才能正常工作。以下复选框在 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>

使用一个蜡笔的解决方案，我有一些对我有用的东西，更简单：

.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位置取决于font-family和font-size！我发现使用 bottom: .08em; 复选框<！> amp;无线电元素是一个很好的一般价值。我在带有Arial <！>放大器的Windows中的Chrome / Firefox / IE11中进行了测试; Calibri字体使用几种小/中/大字体。

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

一个似乎运作良好的简单方法是使用vertical-align应用复选框的垂直位置。它仍然会因浏览器而异，但解决方案并不复杂。

input {
    vertical-align: -2px;
}

参考

尝试vertical-align: middle

你的代码似乎应该是： 

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

尝试我的解决方案，我在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>

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

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

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

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

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>

希望有所帮助。

我还没有完全测试我的解决方案，但它看起来效果很好。

我的HTML很简单：

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

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

编辑：在IE测试后，我在输入中添加了<=>并更改了标签的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;
}

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

我认为这是最简单的方式

input {
    position: relative;
    top: 1px;
}
<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
<form>

这对我很有用：

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>

我不喜欢相对定位，因为它使得元素在其关卡上呈现在其他所有内容之上（如果你有复杂的布局，它可以在某些东西之上）。

我发现vertical-align: sub使复选框在Chrome，Firefox和Opera中看起来非常合适。无法检查Safari因为我没有MacOS而IE10稍微关闭，但我发现它对我来说是足够好的解决方案。

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

现在所有现代浏览器都支持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>

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

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

只是想在标签上添加关于'for'属性的讨论（稍微偏离主题）：

请提供，即使没有必要，因为从javascript使用非常方便：

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

这比试图弄清楚标签是否有输入嵌套，或者输入是在标签之前，还是在......等之后要方便得多。而且它永远不会伤害它......所以。

只需2美分。

如果您使用 ASP.NET Web窗格，则无需担心DIV和其他元素或固定大小。我们可以通过将<asp:CheckBoxList>设置为CSS中的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>

所选择的拥有 400 多个赞成票的答案在 Chrome 28 OSX 中对我不起作用，可能是因为它没有在 OSX 中进行测试，或者它在 2008 年回答这个问题时确实有效。

时代变了，新的 CSS3 解决方案现在变得可行。我的解决方案使用 伪元素 创建一个 自定义复选框. 。因此，规定（无论优点还是缺点，无论你怎么看）如下：

  • 仅适用于现代浏览器（FF3.6+、IE9+、Chrome、Safari）
  • 依赖于自定义设计的复选框，该复选框在每个浏览器/操作系统中呈现完全相同。在这里，我只选择了一些简单的颜色，但您始终可以添加线性渐变等，以使其更具冲击力。
  • 适合特定的字体/字体大小，如果更改，您只需更改复选框的位置和大小即可使其显示垂直对齐。如果调整正确，最终结果在所有浏览器/操作系统中仍应接近完全相同。
  • 没有垂直对齐属性，没有浮动
  • 必须在我的示例中使用提供的标记，如果结构像问题一样，它将不起作用，但是，布局本质上看起来是相同的。如果你想移动东西，你还必须移动相关的 CSS

您的 HTML：

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

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

这个解决方案 隐藏复选框, ，并向标签添加伪元素并为其设置样式以创建可见的复选框。由于标签与隐藏复选框相关联，因此输入字段仍将更新，并且值将随表单一起提交。

js小提琴： http://jsfiddle.net/SgXYY/6/

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

希望有人觉得这很有用！

如果你正在使用Twitter Bootstrap，你可以在checkbox上使用<label>类：

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

对复选框的高度和宽度进行硬编码，移除其填充，并使其高度加上垂直边距等于标签的行高。如果标签文本是内联的，请浮动复选框。 Firefox，Chrome和IE7 +都以相同的方式呈现以下示例： http://www.kornea.com/ CSS-复选框对准 

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

诀窍是只在表格单元格中使用vertical-align，如果使用label标签，则使用inline-block。

输入类型复选框包含在标签内并向左浮动，如下所示：

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

确保高度与（blocklevel）的行高相同。

input[type=checkbox]
{
    vertical-align: middle;
} 
<input id="testCheckbox" name="testCheckbox" type="checkbox">
<label for="testCheckbox">I should align</label>

最后我们来看看问题的根源

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

it

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

it&#39;s an uncentered square with

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

那么我们能做些什么呢？

一个明显的选择是——替换图像！幸运的是，我们可以通过 CSS 来实现这一点，并将其替换为外部图像、base64（CSS 内）图像、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>

您可能想阅读一些有关此类样式的更深入的文章，例如列出的一些文章 这里;这超出了这个答案的范围。

好吧，那么无自定义图像或伪元素解决方案又如何呢？

长话短说：看起来这不起作用，请改用自定义复选框

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

那么哪些浏览器在复选框中具有伪边距呢？我已经检查过 Chrome 75、Vivaldi 2.5（基于 Chromium）、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 (??)：

for zoom = 10 it while for zoom = 11 it

scale 似乎更一致：

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

所以大约 14% 和 2px 可能是正确的值。

现在我们知道（？）伪边距的大小，让我们注意这还不够。所有浏览器的复选框图标大小都相同吗？唉!以下是 DOM 检查器针对无样式复选框显示的内容：

  • 火狐： 13.3像素
  • 铬基： 12.8像素 对于整个事情，因此 12.8 (100% - 14%) = 11像素 对于视觉上被视为复选框的内容
  • IE 11，边缘： 13像素
  • 苹果浏览器：不适用（我相信这些应该在同一屏幕上进行比较）

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

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

enter image description here

或者具有相同的小写字母中线：

enter image description here

或大写字母相同的中间线（更容易看出不同字体大小的差异）：

enter image description here

我们还必须决定复选框的大小是否应该等于小写字母、大写字母或其他字母的高度（更大、更小或介于小写和大写之间）。

对于本次讨论，如果复选框与文本位于同一基线上并且具有大写字母的大小（这是一个非常有争议的选择），我们称对齐方式很好：

enter image description here

现在我们需要什么工具：

  1. 调整复选框大小
  2. 通过伪边距复选框识别 Chromium 并设置特定样式
  3. 调整复选框/标签垂直对齐方式

?

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

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

  2. 恐怕没有可靠的 仅 CSS 方法 这些日子。

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

    comparing vertical-align: top and bottom

    （图片上：垂直对齐：顶部、底部和底部（无框阴影）

那么我们从中得到什么结果呢？

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

上面的代码片段适用于 Chrome（基于 Chromium 的浏览器），但其他浏览器需要较小尺寸的复选框。似乎不可能以解决 Chromium 复选框图像怪癖的方式调整大小和垂直对齐。 我最后的建议是：使用自定义复选框来代替 – 这样你就可以避免沮丧:)

我通常会选中一个未标记的复选框，然后将其作为<！>“;标签<！>一个单独的元素。这是一个痛苦，但是复选框和它们的标签之间的显示方式有很多跨浏览器的区别（正如你所注意到的），这是我能够接近控制一切外观的唯一方式。

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

我真的希望有人能更好地回答你的问题。

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>

上面的代码会将您的列表项目放在三个列表中，只需更改宽度即可。

以下内容提供了跨浏览器的像素完美一致性，即使是IE9：

这种做法非常明智，显而易见：

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

    5. 这会产生全局适用的一般规则： 

    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。

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

所以我知道这已经被多次回答了，但我觉得我有一种比已经提供的更优雅的解决方案。不仅有一个优雅的解决方案，还有两个独立的解决方案可以让您感到满意。话虽如此，您需要知道和看到的所有内容都包含在2个JS Fiddle中，并带有注释。

解决方案＃1依赖于本机<！>“Checkbox <！>”;给定的浏览器，但有一个扭曲...它包含在一个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方法，并且我已经看到了它的普遍性。

谢谢！这也一直让我疯狂。

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

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，这可能解释了一些差异，但这似乎对我有用。

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中运行。

简单地使用vertical-align: sub，如 pokrishka 所述。

小提琴

HTML代码：

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

CSS代码：

.checkboxes input {
    vertical-align: sub;
}
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top