Inconsistent alignment of checkboxes/radioboxes and their labels in various multi-line constellations

[readonly]

codepen: https://codepen.io/readonly/pen/PjzQgv

When a <a> or <strong> (or most other markup) is added to a checkbox/radiobox label that spans multiple lines, the horizontal alignment of the label's text is off. Depending on the browser/os to a different degree.

Firefox is the most consistent on all OSes. In Chrome (tested on Linux and OSX) the first line of a text-only label is too far to the left, while those with more markup look fine. Same happens on IE 11 on Win7.

In addition, the vertical position of the checkbox or radio itself is affected by those combinations. In FF (both Linux + OSX) the radio/checkbox next to a text-only label is ~1px too far too the top, while next to a label with markup it is ~1px too far down. On Chrome, it is fine for text-only labels, but is ~1px too far to the top for labels with markup. The IE11 behavior seems to follow the Chrome behavior.

The issue is more obvious if a radio group or checkbox group features different kinds of labes (see codepen).

bootstrap: v4-alpha6

[gijsbotje]

this is apparently due to these lines
.form-check-input:only-child { position: static; }
does anybody know with what purpose this was added?

[mdo]

Ah, crap. Yeah, that's a misuse of :only-child on my part. I think the only straightforward option is to wait for position utilities to arrive and replace that broken CSS and it's docs example with:

<div class="form-check">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input position-static">
  </label>
</div>