Geek asks and answers

Why do these two buttons display different

Im trying to create a link and equal button.

Why are <button>they <a>displayed in FF using the css declaration below: (pay attention to the outer border at the corners of the button and the different heights and lengths of the two). In Chrome, they are equal, but have an outer border. In IE, they turn out to be equal, but without rounded borders (IE8, which does not support the border radius).

Heres a jsfiddle version and heres 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 do not comment on usability issues for this - I have reasons.

---------- update --------------- From the comments below Ive updated css, check it out on jsfiddle Now I will skip only to set the height equal and somehow get rid of this boundary line ...

+3
1

: ( ..) .

, , . , , , , .

, button a , . border-box, content-box ( W3C). , box-sizing:

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

: ; , .

, , , , . , , , .

+7

More articles:


All Articles