Vertical align checkbox / label pairs [duplicate]

Question

I go through the posts on this issue on Stack Overflow, but nothing really works for me. I have the following CSS code to vertically align checkbox / label pair:

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;
}

The full HTML code is here.

Checkbox / label pairs are vertically centered correctly in Safari (5.0.3) and Firefox (3.6.13) under Mac OS X. On Chrome (Mac OS X) checkboxes are rendered slightly to the top. On Windows OS checkboxes and associate labels are aligned to the bottom (consistently across different browsers: Firefox, Safari, Chrome, and Internet Explorer 8).

Could somebody please explain me why this differences between browsers / OS happens (and also how to avoid them)?

Update

The hack to vertically align checkbox with label in Chrome under Mac is as follows:

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

Now need to implement OS and browser specific conditionals...

Answer 1

another solution:

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

note: it's simple. But not always works fine if the font-size of label is too big.

Answer 2

Maybe the default margins/padding on the <input> are messing things up?

Answer 3

This is how I finally did it:

label input[type=checkbox] {
    margin-top: 5px;
}