Question

我试图将链接和按钮设置为相等。

为什么<button>和<a>在FF中使用以下css声明呈现不同:(注意按钮角上的外边框以及两者的不同高度和长度）。在Chrome中，它们呈现相同但具有外边框。在IE中它们被渲染为相同但没有圆形边框（IE8即不支持border-radius）。

继承人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;   
}

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

----------更新--------------- 从下面的评论我已经更新了css，check it out on 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;

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

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

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

1 个答案: