如何使用CSS標準化按鈕和錨點？

查看此代碼示例的按鈕和錨點：http://jsbin.com/ecitex/2/edit 如何使用CSS標準化按鈕和錨點？

我試圖讓它們在所有瀏覽器中都相同。但差異仍然存在，並且每個瀏覽器的差異也不同（嘗試過Chrome，Safari，Firefox，IE8）。

我缺少哪些CSS規範化？

更新： 每建議：

我加入line-height: 50px（雖然我的用戶代理（Chrome的）默認line-height爲button元素是normal，仍然是垂直居中文本 - 如何？）
我添加了cursor: pointer來標準化鼠標光標。

所以，現在檢查出來的結果在Firefox：注意按鈕上的填充？然後檢查IE8的結果：哇，注意兩者是完全不同的？！

更新2：

看來，IE瀏覽器的問題是已知的，非可解析：http://www.quirksmode.org/css/tests/mozie_button2.html

我還沒有發現在Firefox上的填充任何東西，但。（在怪異模式文章提到與Mozilla的一個問題，但是這是一個不同的問題。）

更新3：

真棒，我們解決了Firefox的問題：http://jsbin.com/ecitex/15/edit

好了，到目前爲止，每一個答案都提供瞭解決方案的一部分，所以並沒有真正的單一最佳答案。我會給予最好的答案，要麼人：

解釋了爲什麼我們必須指定一個line-height: 50px垂直中心文字在a，而button已垂直居中文本用僅有的line-height: normal。
爲IE問題提供解決方案。

來源

2012-11-12 Tim Molendijk

您可以通過刪除在Firefox是微胖：

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

下面是從埃裏克一個很好的解釋邁耶關於線高度，希望解釋爲什麼你需要明確設置爲50px：http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/。

這裏的一些新的CSS，可以修復IE瀏覽器的字體大小問題：

button, a { 
    display: inline-block; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    margin: 10px 0; 
    padding: 0px; 
    height: 50px; 
    border-width: 0; 
    background-color: Red; 
    color: White; 
    font-family: sans-serif; 
    font-weight: normal; 
    font-size: inherit; 
    text-decoration: none; 
    line-height: 50px; 
    cursor: pointer; 
    font-size: 100%; 
} 
button { 
    #width:0px; 
    overflow: visible; 
} 
button::-moz-focus-inner { 
    border: 0; 
    padding: 0; 
}

來源

2012-11-14 16:55:59

您需要使用line-height屬性，使您的定位標記文本垂直居中

Demo

CSS

button, a { 
    display: inline-block; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    margin: 10px 0; 
    padding: 0; 
    height: 50px; 
    border-width: 0; 
    background-color: Red; 
    color: White; 
    font-family: sans-serif; 
    font-weight: normal; 
    font-size: inherit; 
    text-decoration: none; 
    line-height: 50px; <-------- Here 
}

來源

2012-11-12 16:22:59

添加屬性cursor:pointer;，以添加一個指針，當鼠標懸停（輸入並不總是有它）

和對垂直對齊

最後使用line-height:46px;完整的代碼是在這裏 - >http://jsbin.com/ecitex/10/edit

來源

2012-11-12 16:31:18

如何使用CSS標準化按鈕和錨點？

回答

相關問題