.btn-group and .btn don't vertically align nicely together

Created by: fredrock

When a .btn (a, button, or input) are in the same container with a .btn-group, the vertical alignment is off.

I tested this in a simple case by modifying the example at the bottom of http://twitter.github.com/bootstrap/base-css.html

<div class="btn-toolbar">
  <a class="btn" href="#"><i class="icon-align-left"></i></a>
  <div class="btn-group">
    <a class="btn" href="#"><i class="icon-align-left"></i></a>
    <a class="btn" href="#"><i class="icon-align-center"></i></a>
    <a class="btn" href="#"><i class="icon-align-right"></i></a>
    <a class="btn" href="#"><i class="icon-align-justify"></i></a>
  </div>
  <div class="btn-group">
    <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
    <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
      <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
      <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
      <li class="divider"></li>
      <li><a href="#"><i class="i"></i> Make admin</a></li>
    </ul>
  </div>
</div>

I have tested this in the latest releases of Chrome and Firefox, and experience the same issue.

What I'm going right now to hack-fix the issue is as follows:

.btn-group > .btn {
  float: none;
  margin-left: -5px;
}

But because that depends heavily on the font being used and differences in browsers, this is not really a viable solution

I'm in the midst of trying different things to try and fix this, and have not completely pinpointed the issue. It seems that the float on the .btn within the .btn-group is part of the problem.

If anyone has any ideas, I'd like to try them out.