使用CSS使<button>和<a>看起來一樣

我想使<按鈕>和<a>看起來一樣。我發現了一個類似的帖子，建議添加使用CSS使<button>和<a>看起來一樣

box-sizing: content-box; 
-webkit-box-sizing: content-box; 
-moz-box-sizing: content-box;

但是，在Firefox中查看時，它仍然有輕微的高度差異。這是jsfiddle。任何幫助？

2013-02-26 Mr. 14

不，@OneTrickPony，在Firefox中它們完全不同。 – JakeParis 2013-02-26 14:59:55

Twitter Bootstrap .btn類通過按鈕，錨點和輸入（type =「submit」）元素來完成此操作。我建議看看他們的代碼。 – 2013-02-26 15:15:34

button::-moz-focus-inner, 
.btn::-moz-focus-inner 
{ 
    border: 0; 
    padding: 0; 
}

此修復中間一個，仍然在最後的輸入。

UPDATE

你可以看到線高度的最後一個例子在這個例子中http://jsfiddle.net/H3HK8/24/沒有效果，甚至與！重要添加。

在嘗試解決這個規則時，我發現了一些讓情況變得更加可怕的事情：瀏覽器定義！重要的規則不能被作者定義的重要規則所超越。這個規則不能被CSS文件，內聯樣式 - 任何東西否決。

2013-02-26 15:13:22 Chris

它似乎與[FF重寫行高屬性]（http://www.cssnewbie.com/input-button-line-height-bug/#.USzQkG-KLQc） – 2013-02-26 15:18:21

哈！ 40秒對我來說太快了！我正在編輯我的問題，正如你所評論的！ – Chris 2013-02-26 15:19:37

您應該確保所有CSS屬性都相同。因此，不僅盒大小（它並沒有真正做任何事情本身），而且還填充，邊距，行高，字體大小，背景等

2013-02-26 15:00:03

我認爲box-sizing定義了添加邊框的方式。（即填充物的內部或外部）。如果你看看我的jsfiddle例子，按鈕和鏈接都使用相同的樣式。我錯過了什麼嗎？ – 2013-02-26 15:06:20

回答