5

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

4

2 回答 2

5

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

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

示例代码：

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

#form-input {
  height: 50px;
}
于 2013-06-09T01:57:46.150 回答
3

好的，我发现了问题。这是一个 Firefox 问题。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;

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

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

#form-btn {
 line-height: 50px;
 font-size: 16px;
}
于 2013-06-09T03:11:57.930 回答