垂直对齐复选框/标签对

Question

我在Stack Overflow上讨论了这个问题的帖子,但没有什么对我有用.我有以下CSS代码垂直对齐复选框/标签对:

body {
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
    font-size: 11px;
    margin: 0;
    padding: 0;
}

fieldset {
    line-height: 100%;
}

label {
    display: inline-block;
    vertical-align: baseline;
}

完整的HTML代码在这里.

复选框/标签对在Mac OS X下的Safari(5.0.3)和Firefox(3.6.13)中正确垂直居中.在Chrome(Mac OS X)上,复选框略微呈现在顶部.在Windows操作系统上,复选框和关联标签与底部对齐(在不同的浏览器中一致:Firefox,Safari,Chrome和Internet Explorer 8).

有人可以解释一下为什么浏览器/操作系统之间会出现这种差异(以及如何避免它们)？

更新

在Mac下Chrome中垂直对齐复选框与标签的黑客攻击如下:

input[type=checkbox] {
    position: relative;
    top: 1px;
}

现在需要实现操作系统和浏览器特定的条件...

Answer 1

另一种方案:

.checkbox{
vertical-align:-3px;
}

注意:很简单.但如果标签的字体大小太大,并不总是正常.

Answer 2

不知道为什么浏览器会做不同的事情，他们总是这样做。就这一点而言，你尝试过吗display:table-cell;？