CSS buttons and cross-browser problem

Question

I have a class 'button' that I want to use for a button, input and tags. The problem is that both the tags and the input tags have a larger line height than the anchor tag. I gave an example here so you can play firebug or something else with it.

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

But for those who just want to see 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 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 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

, , . , . , , . , min-width, ( , Firefox).

, CSS: .button a {

'button', ( ).

border-radius, border radius, CSS3, , IE.

Edit:
, .
IE: ( , IE, ?).
Firefox: .
Chrome: .

Answer 2

, , , .

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

Safari .