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

这是一直困扰着我的 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由于某种原因切断了额外的空间并允许 IE 的定位与 Safari 和 Firefox 非常相似。
根据您的文本大小，您无疑需要调整相对位置，宽度，高度等，以使事物看起来正确。

希望这有助于其他人！我没有在我今天早上工作的任何项目上尝试过这种特定的技术，所以如果你发现一些工作更加一致的话，肯定会搞定。

有时 vertical-align 需要彼此相邻的两个内联（span，label，input 等）元素才能正常工作。以下复选框在 IE，Safari，FF 和 Chrome 中正确垂直居中，即使文本大小非常小或很大。

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

缺点是额外无意义的 SPAN 标签。

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

现在，如果你有一个非常长的标签文本需要包装而不包装在复选框下，你可以在标签元素上使用填充和负文本缩进：

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

使用One Crayon 的解决方案，我有一些适合我的东西，并且更简单：

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>

在 Safari（我相信其基线）中，像素对像素的渲染方式相同，Firefox 和 IE7 都检查得很好。它也适用于各种标签字体，无论大小。现在，修复 IE 的选择和输入基线......

协慌网

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

答案