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

问题描述

这是困扰我的小问题之一。如何做StackOverflow周围的人们垂直对齐复选框及其标签持续跨浏览器？每当我在Safari中正确对齐它们（通常在输入上使用 vertical-align：baseline ），它们在Firefox和IE中完全关闭。修复它在Firefox，Safari和IE不可避免地搞砸了。

This is one of the minor CSS problems that plagues me constantly. How do folks around StackOverflow 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>

Eric Meyer的重置，所以表单元素相对干净的覆盖。期待您提供的任何提示或诀窍！

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!

推荐答案

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

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. 输入必须在一行。


2. 输入需要在所有浏览器中与标签文本垂直对齐（如果不相同）。


3. 如果标签文本换行，则需要缩进（因此， 。

在我进入任何解释之前，我只是给你代码：

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>

JSFiddle 中的工作示例。

此代码假定您使用像Eric Meyer这样的重置，不会覆盖表单输入边距和填充（因此在输入CSS中输入边距和填充重置）。显然，在现实环境中，你可能会嵌套/覆盖的东西来支持其他输入元素，但我想保持简单。

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.

注意事项：

• * overflow 声明是一个内联IE hack（star-属性hack）。 IE 6和7都会注意到它，但Safari和Firefox会正确地忽略它。我认为它可能是有效的CSS，但你仍然更好的条件注释;


• 最好的说法是，每个浏览器一致的 vertical-align 语句是 vertical-align：bottom 。设置这个，然后相对定位向上的行为在Safari，Firefox和IE几乎相同只有一个像素或两个差异。


• 使用对齐的主要问题是，输入元素周围的神秘空间。它不是填充或边缘，并且它是持久的。在复选框上设置宽度和高度，然后 overflow：hidden 可以切断额外的空间，并允许IE的定位与Safari和Firefox非常相似。


• 根据您的文字大小，您毫无疑问需要调整相对位置，宽度，高度等，才能使事情看起来正确。

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

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