Why are these two buttons rendering different

Question

Im trying to style a link and a button equal.

Why are <button> and <a> rendered diffently in FF with the below css declaration: (notice the outer border on corners of the button and the different height and length of the two). In Chrome they are rendering equal but have an outer border. In IE they are rendered equal but with no rounded borders (IE8 that is, not supporting border-radius).

Heres a jsfiddle version and heres the css

button, a
{    
    background-color: #7da7d8;
    color: #e7e4ed;
    border: 3px solid #f7f7f7;
    border-radius: 8px 8px 8px 8px;
    text-align:center;
    font-weight: normal;   
    display: inline-block;  
    line-height: 1.2em;
    margin: 4px;
    width: 120px;    
    padding: 6px;
    font-size:1.2em;
    text-decoration:none; 
    cursor: pointer;   
}

Please, dont comment on the usability issues for doing this - I have my reasons.

---------- update --------------- From comments below Ive updated the css, check it out on jsfiddle Now I only miss to set the height equal and somehow get rid of that corner border...

Answer 1

Short answer: browsers render real form elements (buttons, etc) and text hyperlinks differently.

There are some things you can further change to make browsers render these elements more similarly. There are other things that you can't change, however, so you might not be able to achieve pixel-identical styles.

Most notably, the different lengths between the button and the a are caused by different box models used for rendering them. Buttons usually use border-box while almost everything else uses content-box (the original W3C box model). You can resolve that by adding a box-sizing style:

    /* Or border-box */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;

Another thing: form elements do not inherit font styles from their containing elements; you need to set the font styles on those elements themselves to change the way fonts are rendered in them.

Regarding your updated fiddle, that's a browser-specific discrepancy and I don't think there's anything you can do about it. Like I said, you might not be able to achieve pixel-identical styles.