CSS ile bir düğmeyi ve bir bağlantıyı normalleştirmek nasıl?

Question

Bu kod örneği bir düğmenin ve bir bağlantı noktasının bir örneğine bakın: http://jsbin.com/ecitex/2/edit

Tüm tarayıcılarda aynı şeyi yapmaya çalışıyorum. Ancak farklılıklar kalır ve her tarayıcıdaki farklı farklılıklar (Chrome, Safari, Firefox, IE8 denendi).

Hangi CSS normalizasyonları eksik?

---

Güncelleme: Başına önerdi:

• ekledim line-height: 50px (benim kullanıcı arayüzünün (Chrome'un) varsayılan rağmen line-heightbutton için elemanlar normal olduğunu ve hala metni dikey merkezleri - nasıl ?!
• Fare imleçlerini normalleştirmek için cursor: pointer ekledim.

http://jsbin.com/ecitex/11/edit

Yani, şimdi Firefox'ta sonucu göz atın: butonuna dolgu fark? Daha sonra IE8'deki sonuca bakın: whoa, ikinin tamamen ve tamamen farklı olduğuna dikkat edin!

---

Güncelleme 2:

O IE sorunlar bilinen ve çözülmesi mümkün olmayan gibi görünüyor: http://www.quirksmode.org/css/tests/mozie_button2.html

Ben Firefox'un dolgu şey olsa bulamadı. (Quirksmode makale Mozilla ile bir sorunu bahseder, ancak bu farklı bir mesele.) 3

---

Güncelleme: şimdiye kadar, http://jsbin.com/ecitex/15/edit

Okay:

Başar, biz Firefox sorunu giderilmiştir Her bir cevap çözümün bir kısmını sağladı, böylece gerçekten tek bir en iyi cevap yoktu. Bir button dikey sadece line-height: normal ile metin merkezli ederken, biz a dikey merkez metne line-height: 50px belirtmek için neden

• açıklar: Ben de kişiye en iyi cevabı veririz.
• IE sorunu için bir çözüm sağlar.

Answer 1

Sen kullanarak Firefox'ta bu ekstra dolgu kaldırabilirsiniz:

İşte

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

Eric'ten iyi bir açıklama Meyer, neden açıkça 50px: http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/ olarak ayarlamanız gerektiğini umduğumuz çizgi yüksekliği hakkında.

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; 
} 

: Burada

IE yazı boyutunu sorunu giderir bazı yeni CSS bulunuyor

Answer 2

Bir işaretçi eklemek için öznitelik cursor:pointer; eklemek için bağlantı etiketi metni dikey merkezli

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 
} 

Answer 3

getirmek line-height özelliğini kullanmaları gerektiğinde fare hover (giriş her zaman böyle olmaz)

ve dikey hizada

için son kullanım line-height:46px; tam kod hazır ->http://jsbin.com/ecitex/10/edit