Basic styling of button elements — test

Updated: 2011-10-26

This page tries to list issues with current web browsers when applying or resetting basic styles of button elements (and input elements with button or submit type).

1. Resetting browser styles

Button (type=button) Span (inline-block)

button, input {
  margin: 0;
  padding: 0;
  border: none;
  font: inherit;
  line-height: normal;
}

• Internet Explorer 7:
  IE7 seems to set a width for the button that is roughly the text’s width + 30px. The button text is then centered (unless you use text-align:left). No idea how to fix this.
  OK in IE 8+.
• Firefox 9:
  3px of left and right padding which cannot be removed by manipulating button styles.
  A possible fix is *::-moz-focus-inner {border:none;padding:0} but you lose the focus styles…

2. Using line-height

Expected result: buttons should be 50px high.

Button (type=button) Span (inline-block)

button, input {
  margin: 0;
  padding: 0;
  border: none;
  font: inherit;
  line-height: 50px;
}

• Internet Explorer 7:
  Button height is 4px taller than line-height (54px instead of 50px.)
• Firefox 9:
  Button height is 2px taller than line-height (52px instead of 50px).
  (In Opera and Webkit, button height is equal to line-height.)
  Once again can be fixed with *::-moz-focus-inner {border:none;padding:0}
• Firefox 9 and Opera 11.52:
  Line height of the input elements cannot be controled (in Firefox, resource://gre-resources/forms.css defines input {line-height: normal !important;}).
  Submitted as Firefox bug 697451 and Opera bug DSK-349026.

3. Using line-height + padding

Expected result: buttons should be 70px high.

Button (type=button) Span (inline-block)

button, input {
  margin: 0;
  padding: 10px;
  border: none;
  font: inherit;
  line-height: 50px;
}

• Internet Explorer 7:
  Button height is 4px taller than line-height (74px instead of 70px.)
• Firefox 9:
  Button height is 72px (line-height + padding + 2px) instead of 70px.
  Left and right padding is 13px instead of the expected 10px.

4. Using height

Expected result: buttons should be 50px high.

Button (type=button) Span (inline-block)

button, input {
  height: 50px;
  margin: 0;
  padding: 0;
  border: none;
  font: inherit;
}

• Height is OK in all browsers.

5. Using height + padding + border

Expected result: buttons should be 50px high.

Button (type=button) Span (inline-block)

button, input {
  height: 50px;
  margin: 0;
  padding: 10px;
  border: solid 5px black;
  font: inherit;
}

• Height is OK in all browsers.

6. Using height + … + box-sizing

Expected result: buttons should be 80px high.

Button (type=button) Span (inline-block)

button, input {
  height: 50px;
  margin: 0;
  padding: 10px;
  border: solid 5px black;
  font: inherit;
  box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
}

• Internet Explorer 7:
  No box-sizing in IE7 so the box ends up at 50px.
  OK in IE8+.