Высота кнопки растет 1px для меньшего размера шрифта

Question

Я использую twitter bootstrap для создания группы кнопок. Когда я изменил размер шрифта меньшего класса на 12 пикселей (по умолчанию 14 пикселей), высота левой кнопки увеличивается на 1 пиксель. Как я могу избежать этого? Проверено 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