爲什麼這兩個按鈕呈現不同

我嘗試設置鏈接和按鈕的樣式相同。爲什麼這兩個按鈕呈現不同

爲什麼<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

爲什麼這兩個按鈕呈現不同

回答

相關問題