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

Question

使用Twitter Bootstrap 2.3.2我有一个input-append表单：

<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 表单。如何让它们在两个浏览器中具有相同的对齐方式？

Answer 1

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

• 确保它们具有相同的垂直padding、font-size和border-size。
• 将输入的height和设置为line-heightx
• 将按钮line-height的设为x

示例代码：

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

#form-input {
  height: 50px;
}

Answer 2

好的，我发现问题了。这是火狐浏览器的问题。Firefox 有一个名为 的属性moz-box-sizing会导致这个小错误。您可以在这里阅读更多信息：https ://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

我所做的只是简单地改变这个：

// Form Inputs //

input[type="text"], 
input[type="password"], 
input[type="date"], 
input[type="datetime"], 
input[type="datetime-local"], 
input[type="month"], 
input[type="week"], 
input[type="email"], 
input[type="number"], 
input[type="search"], 
input[type="tel"], 
input[type="time"], 
input[type="url"], 
textarea {
  -moz-box-sizing: border-box;
}

进入这个：-moz-box-sizing: inherit;

这是我的新代码，上面添加了框大小更改，并在kmiyashiro的帮助下指定了按钮的使用line-height：

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

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