Twitter Bootstrap：使表单输入和按钮在Chrome和Firefox中的高度相同 [英] Twitter Bootstrap: Getting Form Inputs and Buttons to be same the height in Chrome and Firefox

问题描述

使用 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>

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

I customized the form input and button to have this styling:

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

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

Firefox中的输入字段和按钮完全对齐，关闭我的2px的高度，所以我必须把它放到 52px 。这不能做，因为它弄乱了Firefox的形式。

The input field and button in Firefox is exactly aligned but the button in Chrome is off my 2px in height so I have to put it to 52px. This cannot be done since it messes up the Firefox form. How can I get them to have the same alignment in both browsers?

推荐答案

确定，我发现了问题。这是一个Firefox的问题。 Firefox有一个名为 moz-box-sizing 的属性，会产生这个小错误。您可以在这里阅读更多内容： https://developer.mozilla.org / en-US / docs / Web / CSS / box-sizing

OK, I found the problem. It was a Firefox issue. Firefox has a property called moz-box-sizing that makes this small error. You can read more here: 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 的按钮使用：

This is my new code with the added box-sizing change above and with the help of kmiyashiro specifying button use of line-height instead:

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

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

这篇关于Twitter Bootstrap：使表单输入和按钮在Chrome和Firefox中的高度相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！