CSS buttons and crossbrowser issue

Question

I have a class 'button' that I want to use for button, input and a tags. The problem is that both button and input tags have a greater line height than the anchor tag does. I have attached an example here so you can play around with it in firebug or whatever.

http://28dev.com/stackoverflow/css-buttons.html

But for those who just want to see the css/html, here it is:

  .button {
    font-family : helvetica, arial, sans-serif;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background   : url(/images/ui-bg_glass_75_e6e6e6_1x400.png) repeat-x scroll 50% 50% #E6E6E6;
    border-color : #636363 #888888 #888888 #636363;
    border-right : 1px solid #888888;
    border-style : solid;
    border-width : 1px;
    cursor       : pointer;
    display      : block;
    float        : left;
    font-size    : 12px;
    font-weight  : normal;
    line-height  : 100%;
    min-width    : 100px;
    padding      : 3px 12px;
    text-align   : center;
  }
  .button, .button a {
    color : #282828;
    text-decoration : none;
  }

  .button:hover, .button:hover a {
    border-color : #343434;
    color : #080808;
  }
  .marginR { margin-right : 5px; }


  <button class='button marginR' type='submit'>button.button</button>
  <input type="submit" value="input.button" class="button marginR" />
  <a class="button" href="">a.button</a>

Updated CSS: This seems to fix most of the issues in FF, chrome, IE7 and safari:

  .button {
      font-family  : helvetica, arial, sans-serif;
      color        : #282828;
      background   : url(/images/layouts/silver/buttons.png) repeat-x scroll 50% 50% #E6E6E6;
      border-color : #636363 #888888 #888888 #636363;
      border-right : 1px solid #888888;
      border-style : solid;
      border-width : 1px;
      cursor       : pointer;
      display      : block;
      float        : left;
      font-size    : 12px;
      font-weight  : normal;
      min-width    : 150px;
      padding      : 3px 0px;
      text-align   : center;
      margin-top   : 0px;
      line-height  : 15px;
      text-decoration : none;
      border-radius        : 3px;
      -webkit-border-radius: 3px;
      -moz-border-radius   : 3px;
  }
  /* Invalid CSS
     God love IE's inability to fix their bugs properly leaving us workarounds to their inept development.
     See http://www.webdevout.net/css-hacks
  */
  html* a.button { line-height : 18px; }

  .button:hover {
      background-image : url(/images/layouts/silver/button-hover.png);
      border-color : #343434;
      color : #080808;
  }
  .marginR { margin-right : 5px; }

Answer 1

That's just how buttons are produced in browsers, they are form elements and have different properties. I've never seen a way to fix that issue easily. I suppose you can just apply different properties to the anchors until they look the same or close to it. You'll notice that your buttons also aren't getting your min-width property applied to them (at least not in Firefox).

Also, your CSS: .button a {

This would apply to all anchors inside an element with class 'button' which none exist and shouldn't ever exist (you don't put anchors inside buttons).

You also forgot the basic 'border-radius' property which is actually the only CSS3 approved border radius property and is the only thing that works in IE.

Edit:
Here's a quick rundown of what happens in different browsers.
IE: Displays everything OK (wow, IE, really?).
Firefox: Auto-adjusts width of buttons and buttons are taller.
Chrome: Adds margins around the buttons and buttons are taller.

Answer 2

From what I can see, I don't think this is really a line-height problem.

a.button
{
    position: relative;
    top:      2px;
}

Aligns their tops in Safari for me.