Twitter Bootstrap：使表单输入和按钮与 Chrome 和 Firefox 中的高度相同

Using Twitter 引导程序 2.3.2 http://twitter.github.io/bootstrap/base-css.html#forms我有一个input-append form:

<form class="bs-docs-example">
  <div class="input-append">
    <input type="text" id="form-input" class="span2">
    <button type="button" class="btn" id="form-btn">Go!</button>
  </div>
</form>

我自定义了表单输入和按钮以具有以下样式：

#form-input {
  height: 50px;
  font-size: 16px;
  padding: 0px 6px;
}

#form-btn {
  height: 50px;
  font-size: 16px;
}

Firefox 中的输入字段和按钮完全对齐，但 Chrome 中的按钮高度超出了我的 2px，所以我必须将其放在52px。这是无法完成的，因为它会弄乱 Firefox 的表单。如何让它们在两个浏览器中具有相同的对齐方式？

如果您检查引导样式，您会发现它们没有明确定义height按钮的，但是line-height.

• 确保它们具有相同的垂直方向padding, font-size, and border-size.
• Set the height and line-height of the input to x
• Set the line-height of the button to x

示例代码：

#form-input,
#form-button {
  line-height: 50px;
  font-size: 16px;
}

#form-input {
  height: 50px;
}