html - 行高和输入按钮高度

Question

我现在正在创建按钮样式。

目前，它们看起来像这样:

html {
    color: #555;
    background: #fefefe;
    font-size: 1em;
    line-height: 1.5;
}

.btn {
    display: inline-block;
    text-decoration: none;
    padding: 5px 10px;
    background: #ccc;
    border: 1px solid #cdcdcd;
}

<link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" rel="stylesheet"/>

<a href="#" class="btn">Test</a>
<input type="button" value="Test" class="btn">
<input type="submit" value="Test" class="btn">
<input type="reset" value="Test" class="btn">
<button type="button" class="btn">Test</button>
<button type="submit" class="btn">Test</button>
<button type="reset" class="btn">Test</button>

如您所见，使用 input 创建的三个按钮看起来与其他按钮不同。

经过一些调试后，我发现是 html 元素上的 line-height 声明对此负责。

如何在设置了 line-height 的情况下让我的按钮看起来一样？

请注意，我已经在使用 normalize.css。

Answer 1

正如其他人所指出的，您应该为您的 .btn 类设置一个 line-height，但是，我相信您实际上想要 line-height: inherit; 特别是这样您就可以继承行高。