Checkbox/radio aligned too low

[quasipickle]

The default checkbox/radio alignment seems to be with the bottom of it's associated label text. To me, visually this makes the elements seem too low. The inline variants appear to have the boxes aligned with the middle of the text, which looks better.

[mdo]

What version of Bootstrap? What browser (version and OS)? Screenshots?

[quasipickle]

Duh - right, sorry.

The v4 Alpha. You can actually see this in the documentation on both Chrome and Firefox on OS X.

[quasipickle]

In practice the boxes seem to be aligned to the top:

so it looks to be a documentation/browser bug stemming from _forms.scss:193

[cvrebert]

X-Ref: #13936, #15791

[cvrebert]

Some findings:

• OS X Chrome checkbox dimensions: 28x28 (native px)
• OS X Chrome radio button dimensions: 32x32 (native px)

Currently, in bleeding-edge v4, the strikethrough line of the label text is 1 native px below the center of the checkbox/radio:

(Strikethrough being one possible interpretation of the "vertical center" of text)

[cvrebert]

For Firefox:

• OS X Firefox checkbox dimensions: 24x24 (native px)
• OS X Firefox radio button dimensions: 28x28 (native px)

Similarly, the strikethrough line of the label text is currently 1 native px below the center of the checkbox/radio, though Firefox's strikethrough is lower than Chrome's (in a bad way):

(Guess I should find a different metric..)

[cvrebert]

For Safari:

• Safari radio button dimensions: 16x17 (native px)
• Safari checkbox dimensions: 14x15 (native px)

And since my screen is retina (and after double-checking manually), CSS px equal 2 of my native px.

[mdo]

Always bummed to find these problems, hah. Seeing it in Firefox, but not in Chrome. Going to close this as a won't fix since it's virtually impossible to get this 100% locked down across browsers. If y'all have any specific ideas for what we could try, I'm all for it though.