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

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

为什么< button>和< a>使用以下css声明在FF中进行不同的渲染:(注意按钮角上的外边框以及两者的不同高度和长度).在Chrome中,它们呈现相同但具有外边框.在IE中它们被渲染为相同但没有圆形边框(IE8即不支持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;   
}

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

———-更新—————
从下面的评论我已经更新了css,check it out on jsfiddle现在我只是错过了设置高度相等,并以某种方式摆脱角落边界…

解决方法

简答：浏览器以不同方式呈现真实表单元素(按钮等)和文本超链接.

您可以进一步更改某些内容,以使浏览器更加相似地呈现这些元素.但是,还有其他一些事情无法改变,因此您可能无法实现像素相同的样式.

最值得注意的是,按钮和a之间的不同长度是由用于渲染它们的不同盒子模型引起的.按钮通常使用边框,而几乎所有其他内容都使用内容框(原始W3C框模型).您可以通过添加框大小调整样式来解决此问题：

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

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

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

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

解决方法

相关文章