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

我尝试设置链接和按钮的样式相同。为什么这两个按钮呈现不同

为什么<button>和<a>在FF中与下面的css声明呈现不同：（注意按钮角落的外边框以及两个不同的高度和长度）。在Chrome中，它们呈现相同的效果，但有一个外边框。在IE中，它们被渲染成平等的，但没有圆角（IE8即不支持边界半径）。

继承人jsfiddle version和继承人的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; 
}

请不要在这样做了可用性问题，注释 - 我有我的理由。

----------更新--------------- 从下面的评论Ive更新了css，check it out on jsfiddle现在我只想念设置高度相等，以某种方式摆脱那个边界...

来源

2011-05-15 Muleskinner

简短的回答：浏览器呈现真实的表单元素（按钮等）和文本超链接不同。

有一些事情可以进一步修改，使浏览器更加类似地渲染这些元素。还有其他的东西，你不能改变，但是，所以你可能无法实现像素相同的样式。

最值得注意的是，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;

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

关于您更新的小提琴，这是一个特定于浏览器的差异，我不认为您可以对此做任何事情。就像我说的，你可能无法实现像素相同的样式。

来源

2011-05-15 09:01:15 BoltClock

它可能会支付补充，_defaults_是不同的，并且不仅仅是设置OP已明确设置 – tobyodavies 2011-05-15 09:07:57

@tobyodavies是谢谢你提到这一点，在我的项目上我已包括一个CSS重置 – Muleskinner 2011-05-15 09:14:39

感谢您的输入 – Muleskinner 2011-05-15 13:29:51

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

回答

相关问题