为什么这两个按钮呈现不同

Question

我试图设置链接和按钮相等的样式.

为什么<button>和<a>在FF与下面的CSS声明diffently呈现:(注意按钮和两个不同的高度和长度的角落外边框).在Chrome中,它们呈现相同但具有外边框.在IE中它们被渲染为相同但没有圆形边框(IE8即不支持border-radius).

这是一个jsfiddle版本和继承人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;   
}

请不要评论这样做的可用性问题 - 我有我的理由.

----------更新---------------从下面的评论我已经更新了css,在jsfiddle上查看它现在我只是错过了设置高度相等而且不知何故摆脱角落边界......

Answer 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;

另一件事:表单元素不从其包含元素继承字体样式; 您需要在这些元素本身上设置字体样式以更改字体在其中的呈现方式.

关于你的更新小提琴,这是一个浏览器特定的差异,我不认为你可以做任何事情.就像我说的,你可能无法实现像素相同的风格.