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

Question

如何使复选框及其标签一致地跨浏览器对齐？这是一个小的CSS问题，不断困扰我。堆栈溢出周围的人如何垂直对齐？checkboxes以及他们labels始终如一跨浏览器？每当我在Safari中正确地对齐它们时(通常使用vertical-align: baseline在input)，它们完全不在Firefox和IE中。在Firefox中修复它，Safari和IE不可避免地会出错。我每次编码表单都会浪费时间。下面是我使用的标准代码：<form>    <div>        <label><input type="checkbox" /> Label text</label>    </div></form>我通常使用EricMeyer的重置，所以Form元素相对干净的覆盖。期待任何技巧或技巧，你必须提供！

Answer 1

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

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.

这段代码假设您使用的是像EricMeyer那样的重置，它不覆盖输入边距和填充(因此在输入CSS中放置页边距和填充重置)。显然，在一个活动环境中，您可能需要嵌套/重写东西来支持其他输入元素，但我希望保持简单。

要注意的事情：

• 这个

  *overflow

  声明是一个内联IE黑客(星型属性黑客)。IE6和7都会注意到它，但是Safari和Firefox都会正确地忽略它。我认为它可能是有效的CSS，但是使用条件注释仍然更好；只是简单地使用它。
• 据我所知，唯一

  vertical-align

  语句在浏览器之间是一致的

  vertical-align: bottom

  ..在Safari、Firefox和IE中，设置这个和相对向上的位置几乎是一样的，只有一两个像素的差异。
• 使用对齐的主要问题是IE在输入元素周围贴上了一堆神秘的空间。它不是填充或边缘，它是该死的坚持。在复选框上设置宽度和高度，然后

  overflow: hidden

  出于某种原因，切断了额外的空间，并允许IE的定位非常类似于Safari和Firefox。
• 根据您的文本大小，您无疑需要调整相对位置、宽度、高度等，以使事情看起来正确。

希望这能帮到别人！除了今天早上我正在做的项目之外，我还没有尝试过这个特定的技术，所以如果你发现一些更一致的工作方法，那就一定要认真考虑一下。

Answer 2

.的工作一个蜡笔溶液，我有一些对我有用的更简单的东西：

.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;对于复选框&无线电元素是一个很好的一般价值。我在Chrome/Firefox/IE11上用Arial和杯标字体用几个小/中/大字体对它进行了测试。

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