html – 垂直对齐复选框/标签对

参见英文答案 > How to align checkboxes and their labels consistently cross-browsers35
我通过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代码是here.

复选框/标签对在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;
}

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

解决方法

不知道为什么浏览器做不同的事情,他们只是总是这样做.就这个,你试过显示：table-cell;？