Twitter Bootstrap: Getting Form Inputs and Buttons to be same the height in Chrome and Firefox

Question

Using Twitter Bootstrap 2.3.2 I have a 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>

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;
}

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?

Answer 1

If you inspect the bootstrap styles, you will see that they do not explicitly define the height of the button, but the line-height.

• Make sure they have the same vertical 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

sample code:

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

#form-input {
  height: 50px;
}

Answer 2

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

What I did was simply turn this:

// 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;
}

Into this: -moz-box-sizing: inherit;

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;
}