按钮高度增加 1px 以减小字体大小答案

【问题标题】：Height of button grows 1px for smaller font size按钮高度增加 1px 以减小字体大小
【发布时间】：2013-04-11 10:21:50
【问题描述】：

我正在使用 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/获取

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

同时设置line-height

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

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

【讨论】：

【解决方案2】：

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

【讨论】：