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

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

经过一个多小时的调整、测试和尝试不同风格的标记，我认为我可能有一个不错的解决方案。这一特定项目的要求是：输入必须在自己的线路上。复选框输入需要在所有浏览器上与标签文本垂直对齐(如果不是相同的话)。如果标签文本包装，它需要缩进(所以没有包装在复选框下)。在我解释之前，我先给你一个代码：label {&nbsp; display: block;&nbsp; padding-left: 15px;&nbsp; text-indent: -15px;}input {&nbsp; width: 13px;&nbsp; height: 13px;&nbsp; padding: 0;&nbsp; margin:0;&nbsp; vertical-align: bottom;&nbsp; position: relative;&nbsp; top: -1px;&nbsp; *overflow: hidden;}<form>&nbsp; <div>&nbsp; &nbsp; <label><input type="checkbox" /> Label text</label>&nbsp; </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] {&nbsp; vertical-align: middle;&nbsp; position: relative;&nbsp; bottom: 1px;}input[type=radio] {&nbsp;&nbsp; bottom: 2px;&nbsp;}&nbsp;<label><input type="checkbox" /> Label text</label><p class="font2">&nbsp; <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] {&nbsp; vertical-align: middle;&nbsp;&nbsp; position: relative;&nbsp; bottom: .08em; /* this is a better value for different fonts! */}<label><input type="checkbox" /> Label text</label>&nbsp;<p class="font2">&nbsp; <label><input type="checkbox"/> Label text</label></p>