内联无序列表IE7中复选框旁边的标签垂直对齐答案

【问题标题】：Vertical alignment of labels next to checkbox in inline unordered list IE7内联无序列表IE7中复选框旁边的标签垂直对齐
【发布时间】：2011-08-09 09:10:33
【问题描述】：

这个小提琴在 FFOX4、IE8 中垂直对齐，但标签文本在 IE7 中显得有点不合时宜。

http://jsfiddle.net/6hQ8e/1/

除了使用 hacks/条件 CSS 之外，还有什么方法可以解决这个问题吗？

【问题讨论】：

标签： css internet-explorer xhtml vertical-alignment

【解决方案1】：

复选框在旧版 IE 中具有“硬”边距。给他们margin: -3px 专门用于 IE

【讨论】：

sorry My Head hurts 在没有条件 CSS 的情况下回答问题更正确。仍然得到我的邀请:)

【解决方案2】：

从你的 CSS 中删除这一行：

.selection label{padding:0; width:auto; vertical-align:bottom;}

并替换为以下 CSS：

.selection label{float: none; padding:0; width:auto; vertical-align:middle;}
.selection input{float: none}

【讨论】：

我不认为 vertical-align: center 是该属性的有效值，因此使用 middle 代替它工作正常。忘记了您不能将垂直对齐应用于块/浮动元素。
@RyanP13 - 很抱歉 - 一定是在做白日梦，但我很高兴你让它工作了，我已经相应地修改了我的答案。只是出于兴趣，如果您要求一个不需要条件 CSS 的答案，为什么您会接受一个需要条件 CSS 的答案？