如何跨浏览器一致地对齐复选框及其标签 [英] How to align checkboxes and their labels consistently cross-browsers

问题描述

这是经常困扰我的 CSS 小问题之一.

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

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

在Firefox中修复，Safari和IE难免一团糟.每次编写表单时，我都在浪费时间.

这是我使用的标准代码:

<div><label><input type="checkbox"/>标签文本

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

解决方案

警告！这个答案太老了并且在现代浏览器上不起作用.

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

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

---

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

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

在我进入任何解释之前，我会给你代码:

label {显示:块；左边距:15px；文本缩进:-15px；}输入 {宽度:13px；高度:13px；填充:0；保证金:0;垂直对齐:底部；位置:相对；顶部:-1px；*溢出:隐藏；}

<div><label><input type="checkbox"/>标签文本

这是 JSFiddle 中的工作示例.

此代码假定您使用的是像 Eric Meyer 一样的重置，它不会覆盖表单输入边距和填充(因此在输入 CSS 中放置了边距和填充重置).显然，在实际环境中，您可能会嵌套/覆盖一些内容以支持其他输入元素，但我想让事情保持简单.

注意事项:

• *overflow 声明是内联 IE hack(star-property hack).IE 6 和 7 都会注意到它，但 Safari 和 Firefox 会正确地忽略它.我认为它可能是有效的 CSS，但您仍然最好使用条件注释；只是为了简单起见.
• 据我所知，唯一在浏览器间保持一致的 vertical-align 语句是 vertical-align:bottom.设置这个然后相对向上定位在 Safari、Firefox 和 IE 中的行为几乎相同，只有一两个像素的差异.
• 使用对齐的主要问题是 IE 在输入元素周围粘贴了一堆神秘的空间.它不是填充或边距，而且是该死的持久性.在复选框上设置宽度和高度，然后 overflow: hidden 出于某种原因切断了额外的空间，并允许 IE 的定位与 Safari 和 Firefox 非常相似.
• 根据您的文字大小，您无疑需要调整相对位置、宽度、高度等，以使事情看起来正确.

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

---

警告！这个答案太老了并且在现代浏览器上不起作用.

This is one of the minor CSS problems that plague me constantly.

How do folks around Stack Overflow vertically align checkboxes and their labels consistently cross-browser?

Whenever I align them correctly in Safari (usually using vertical-align: baseline on the input), they're completely off in Firefox and IE.

Fix it in Firefox, and Safari and IE are inevitably messed up. I waste time on this every time I code a form.

Here's the standard code that I work with:

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

I usually use Eric Meyer's reset, so form elements are relatively clean of overrides. Looking forward to any tips or tricks that you have to offer!

解决方案

Warning! This answer is too old and doesn't work on modern browsers.

_{I'm not the poster of this answer, but at the time of writing this, this is the most voted answer by far in both positive and negative votes (+1035 -17), and it's still marked as accepted answer (probably because the original poster of the question is the one who wrote this answer).}

As already noted many times in the comments, this answer does not work on most browsers anymore (and seems to be failing to do that since 2013).

---

After over an hour of tweaking, testing, and trying different styles of markup, I think I may have a decent solution. The requirements for this particular project were:

1. Inputs must be on their own line.
2. Checkbox inputs need to align vertically with the label text similarly (if not identically) across all browsers.
3. If the label text wraps, it needs to be indented (so no wrapping down underneath the checkbox).

Before I get into any explanation, I'll just give you the code:

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>

Here is the working example in JSFiddle.

This code assumes that you're using a reset like Eric Meyer's that doesn't override form input margins and padding (hence putting margin and padding resets in the input CSS). Obviously in a live environment you'll probably be nesting/overriding stuff to support other input elements, but I wanted to keep things simple.

Things to note:

• The *overflow declaration is an inline IE hack (the star-property hack). Both IE 6 and 7 will notice it, but Safari and Firefox will properly ignore it. I think it might be valid CSS, but you're still better off with conditional comments; just used it for simplicity.
• As best I can tell, the only vertical-align statement that was consistent across browsers was vertical-align: bottom. Setting this and then relatively positioning upwards behaved almost identically in Safari, Firefox and IE with only a pixel or two of discrepancy.
• The major problem in working with alignment is that IE sticks a bunch of mysterious space around input elements. It isn't padding or margin, and it's damned persistent. Setting a width and height on the checkbox and then overflow: hidden for some reason cuts off the extra space and allows IE's positioning to act very similarly to Safari and Firefox.
• Depending on your text sizing, you'll no doubt need to adjust the relative positioning, width, height, and so forth to get things looking right.

Hope this helps someone else! I haven't tried this specific technique on any projects other than the one I was working on this morning, so definitely pipe up if you find something that works more consistently.

---

Warning! This answer is too old and doesn't work on modern browsers.

这篇关于如何跨浏览器一致地对齐复选框及其标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！