Inline checkboxes with blank space overlap in Chrome

[jaimeirurzun]

See example 2:

The first two forms have the same markup, with the only difference of the space in the label "Check 2":

<form class='form-inline'>
    <input type='text'/>
    <label for='check1' class='checkbox inline'>
      <input type='checkbox' id='check1' name='check1'/>
      Check1
    </label>
    <label for='check2' class='checkbox inline'>
      <input type='checkbox' id='check2' name='check2'/>
      Check 2
    </label>
    <button type='submit' class='btn'>Button</button>
</form>

The third form is an equivalent version with no bootstrap styles applied (only display: inline-block;), to ensure it's not Chrome itself causing this. This happens in latest Chrome (17.0.963.46), but renders correctly in latest Firefox (10.0).

[mdo]

Finally tracked this down—was a result of the float, negative margin, and padding coming together on the checkbox. All resolved in 2.0.2-wip.

[jaimeirurzun]

The same still happens if you want checkboxes to display inline inside a form-horizontal form:

<form class='form-horizontal'>
    <input type='text'/>
    <label for='check1' class='checkbox inline'>
      <input type='checkbox' id='check1' name='check1'/>
      Check1
    </label>
    <label for='check2' class='checkbox inline'>
      <input type='checkbox' id='check2' name='check2'/>
      Check2
    </label>
    <button type='submit' class='btn'>Button</button>
    <label for='check3' class='checkbox inline'>
      <input type='checkbox' id='check3' name='check2'/>
      Check 3
    </label>
    <button type='submit' class='btn'>Button</button>
</form>

Unless you consider this is a hacky use of form-horizontal.

[cvrebert]

Reopening for further investigation per #12943 (comment)

[mdo]

I don't think this is an issue anymore—I couldn't trigger it in Chrome.