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

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

这是我使用的标准代码：

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

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

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

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

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

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出于某种原因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>

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

看起来不错的一件容易的事是使用 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，歌剧，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 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 使用并行表示歉意）：

复选框的屏幕截图：Chrome 复选框的屏幕截图：IE

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

诀窍是仅在表单元格中使用垂直对齐方式，如果使用标签标签，则仅在行内块中使用。

答案