Jak normalizować przycisk i kotwicę za pomocą CSS?

Question

Sprawdź kod przykładowy przycisku i kotwicę: http://jsbin.com/ecitex/2/edit

Staram się, aby były identyczne we wszystkich przeglądarkach. Różnice pozostają jednak różne w każdej przeglądarce (wypróbowano Chrome, Safari, Firefox, IE8).

Których normalizacje CSS brakuje?

---

Aktualizacja: Per sugerował:

• dodałem line-height: 50px (chociaż() domyślnie Chrome mój agent autora line-height dla button elementów jest normal i nadal to pionowo Centra tekst - jak ?!)
• Dodałem cursor: pointer, aby znormalizować kursory myszy.

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

Więc teraz sprawdzić wynik w Firefoksie: Zawiadomienie padding na przycisku? Następnie sprawdź wynik w IE8: whoa, zauważ, jak te dwie są całkowicie i całkowicie różne ?!

---

Aktualizacja 2:

Wydaje się, że problemy z IE są znane i nie rozpoznawana: http://www.quirksmode.org/css/tests/mozie_button2.html

nie znalazłem nic na obicia Firefoksa chociaż. (Artykuł Quirks Mode wspomina problem z Mozilli, ale to już inna kwestia.)

---

Update 3:

Awesome, my ustalił Firefox problem: http://jsbin.com/ecitex/15/edit

Ok, więc daleko każda odpowiedź stanowi część rozwiązania, więc nie ma jednej najlepszej odpowiedzi. będę udzielać najlepszą odpowiedź osobie, że:

• wyjaśnia dlaczego musimy określić line-height: 50px pionowo wyśrodkować tekst w a, natomiast button jest pionowo wyśrodkowany tekst ze zwykłego line-height: normal.
• Zapewnia rozwiązanie problemu z IE.

Answer 1

Można usunąć tę dodatkową wyściółkę w Firefoksie za pomocą:

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

Oto dobre wyjaśnienie od Erica Meyer o wysokości linii, co, mam nadzieję, wyjaśnia, dlaczego musisz jawnie ustawić go jako 50px: http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/.

Oto niektóre nowe CSS, który rozwiązuje problem rozmiar czcionki w 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; 
} 

Answer 2

Trzeba użyć line-height własność przynieść tagu kotwicy tekst pionowo wyśrodkowany

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

dodać atrybut cursor:pointer; aby dodać wskaźnik, gdy mysz jest najechany (dane wejściowe nie zawsze są dostępne)

i przy ostatnim użyciu line-height:46px; dla pionowego align

pełny kod jest tutaj ->http://jsbin.com/ecitex/10/edit