这是一直困扰我的CSS小问题之一
堆栈溢出周围的人如何垂直对齐复选框标签一致地跨浏览器
每当我在Safari中正确对齐它们时（通常在输入上使用垂直对齐：基线），它们在Firefox和IE中就完全关闭了
在Firefox中修复它，Safari和IE将不可避免地陷入混乱。每次编写表单时，我都在这上面浪费时间
以下是我使用的标准代码：
<；表格>；
<；部门>；
<；标签>&书信电报；输入类型=“复选框”/>；标签文本</标签>；
</部门>；
</表格>我通常使用Eric Meyer的重置，因此表单元素相对来说没有覆盖。期待着任何提示或技巧，你必须提供
警告！这个答案太老了，而且在现代浏览器上不起作用
我不是这个答案的发帖人，但在写这篇文章的时候，这是迄今为止赞成票和反对票最多的答案（+1035-17），它仍然被标记为被接受的答案（可能是因为问题的原始发帖人就是写这个答案的人）。
正如已经在评论中多次提到的那样，这个答案在大多数浏览器上已经不起作用了（而且似乎从2013年起就不起作用了）
经过一个多小时的调整、测试和尝试不同风格的标记后，我想我可能有了一个不错的解决方案。该特定项目的要求如下：
- 输入必须在自己的线路上
- 复选框输入需要在所有浏览器中与标签文本垂直对齐（如果不相同）
- 如果标签文本换行，则需要缩进（因此复选框下方无换行）
在我进行任何解释之前，我只想告诉您代码：
标签{
显示：块；
左侧填充：15px；
文本缩进：-15px；
}
输入{
宽度：13px；
高度：13px；
填充：0；
保证金：0；
垂直对齐：底部对齐；
位置：相对位置；
顶部：-1px；
*溢出：隐藏；
}<；表格>；
<；部门>；
<；标签>&书信电报；输入类型=“复选框”/>；标签文本</标签>；
</部门>；
</表格>下面是JSFIDLE中的工作示例
这段代码假设您正在使用类似Eric Meyer的重置，它不会覆盖表单输入边距和填充（因此将边距和填充重置放在输入CSS中）。显然，在实时环境中，您可能会嵌套/覆盖一些东西来支持其他输入元素，但我希望保持简单
注意事项：
*overflow声明是一种内联IE攻击（star属性攻击）。IE6和7都会注意到这一点，但Safari和Firefox会正确地忽略它。我认为它可能是有效的CSS，但使用条件注释仍然更好；只是为了简单起见- 据我所知，在所有浏览器中唯一一致的
vertical align语句是vertical align:bottom。在Safari、Firefox和IE中，设置这一点，然后相对向上定位，表现几乎相同，只有一两个像素的差异 - 使用对齐的主要问题是IE在输入元素周围留下了一堆神秘的空间。它不是填充或边距，而是该死的持久性。在复选框上设置一个宽度和高度，然后出于某种原因设置“溢出：隐藏”，可以切断额外的空间，使IE的定位与Safari和Firefox的定位非常相似
- 根据您的文本大小，您无疑需要调整相对位置、宽度、高度等，以使内容看起来正确
希望这对其他人有帮助！除了今天早上我正在做的项目之外，我还没有在任何项目上尝试过这种特定的技术，所以如果你发现一些更能持续工作的项目，一定要加油