css - 按钮的高度增加 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