html - 引导按钮的高度随额外跨度而变化

Question

我正在使用Bootstrap在我们的网站上创建所有按钮元素。

按钮高度是使用 line-height 创建的，这也有助于使文本居中。

我想在一个按钮中包含两种不同的字体大小。标准尺寸和较小的注释。我在这里用 jsfiddle创建了一个非常精简的版本

这是html。

<div class="button">
    test
    <small>(note)</small>
</div>

这是CSS。

.button {
    background-color: orange;
    color: #fff;
    width: 150px;
    line-height: 60px;
    font-size: 26px;
    text-align: center;
    vertical-align: middle;
}

small {
    font-size: 15px;
}

问题是按钮的高度增加了 4 个像素。删除较小的文本，将再次将按钮带到正确的高度。由于我没有更高的按钮，如何解决这个问题？

具有 60px 的固定高度属性也不起作用，因为这样文本不再垂直居中。

感谢您的帮助。

Answer 1

如果您将 a 添加vertical-align到small标签中，它会正常（在 chrome 上）

http://jsfiddle.net/eAZCN/3/

.button {
    background-color: orange;
    color: #fff;
    width: 150px;
    line-height: 60px;
    font-size: 26px;
    text-align: center;
    vertical-align: middle;
}

.button small {
    font-size: 15px;
    vertical-align: middle;
    line-height:10px;
}