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

Question

这是一直困扰我的 CSS 小问题之一。

Stack Overflow 周围的人如何垂直对齐复选框及其标签 始终跨浏览器？

每当我在 Safari 中正确对齐它们时(通常在 input 上使用 vertical-align: baseline)，它们在 Firefox 和 IE 中完全关闭。

在Firefox中修复，Safari和IE难免乱七八糟。每次编写表单代码时，我都会在这上面浪费时间。

这是我使用的标准代码:

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

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

Answer 1

警告!这个答案太旧并且在现代浏览器上不起作用。

<子>我不是这个答案的发布者，但在撰写本文时，这是迄今为止在正面和负面投票中投票最多的答案 (+1035 -17)，并且它仍然被标记为已接受的答案(可能是因为问题的原始发布者是写此答案的人)。

正如在评论中多次指出的那样，这个答案不再适用于大多数浏览器(并且自 2013 年以来似乎无法做到这一点)。

---

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

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

除了我今天早上正在处理的元素之外，我还没有在任何元素中尝试过这种特定技术，所以如果你发现一些更一致的方法，一定要加油。

---

警告!这个答案太旧并且在现代浏览器上不起作用。