html复选框没对齐,html – 如何对齐复选框及其标签一致的跨浏览器

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

>输入必须在自己的行上。

>复选框输入需要在所有浏览器中与标签文本垂直对齐(如果不相同)。

>如果标签文本换行，它需要缩进(因此在复选框下方没有换行)。

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

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;

}

Label text

这里是在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粘在输入元素周围的一堆神秘的空间。它不是填充或边缘，并且它是持久的。在复选框上设置宽度和高度，然后溢出：由于某种原因而隐藏，切断额外的空间，并允许IE的定位与Safari和Firefox非常相似。

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

希望这有助于别人！我没有尝试这个具体的技术，除了我今天上午工作的任何项目，所以绝对管道，如果你找到一些更一致的工作。