对于较小的字体大小，按钮的高度增加1px

Question

我正在使用twitter bootstrap创建一个按钮组。 当我将较小类的字体大小更改为12px（默认为14px）时，左键的高度增加1px。我怎么能避免呢？由Chrome 26，Firefox 20检查。

<div class="btn-group">
  <button class="btn">
    Foo
    <div class="smaller" style="font-size: 12px;">
      Smaller
    </div>
  </button>
  <button class="btn">
    Bar
  </button>
</div>

示例可在http://jsfiddle.net/kawachi/xkP9j/

获得

Answer 1

同时设置line-height

http://jsfiddle.net/xkP9j/5/

<div class="smaller" style="font-size: 12px;line-height: 12px;">
   Smaller
</div>

Answer 2

问题是线高。您需要从line-height中移除.btn属性，或者需要将其添加到div.smaller以匹配font-size