Jeg har ofte oplevet problemer med at få teksten på især grafiske knapper til at stå korrekt. Sidste gang var det den lodrette alignment på knapper i Firefox, der drillede. Teksten på knappen sad for lavt og vertical alignment virker ikke på teksten på en submit knap.
I første omgang lykkes det at opnå et rimeligt resultat med at bruge padding-bottom for at få hævet teksten på knappen op. Desværre ødelagde denne Firefox løsning til gengæld oplevelsen i både Chrome og alle alle IE browserne. Og løsningen endte i bedste fald i et kompromis, hvor teksten sad en smule for højt i IE og Chrome og en smule for lavt i Firefox.
En grundig søgning på “vertical alignment input button” viste, at problemet var velkendt, og jeg fandt dette gode fix på stackoverflow: Fix af bug med vertical alignment på input submit element:
input::-moz-focus-inner {/*Remove button padding in FF*/
border: 0;
padding: 0;
}
I mit tilfælde var det border propertien, der løste problemet. Og linjen med padding kunne fjernes, da jeg havde fjernet eksisterende padding på knappen for at få visningen så ensartet som muligt i de forskellige browsere.
Fikset med moz-focus-inner har dog den bivirkning at den stiplede linje i Firefox, der viser at knappen er aktiv forsvinder. Dette kan give problemer for brugere, der navigerer et website med tastaturet.
Browsernes forskellige default rendering af tekst og padding på knapper kan i det hele taget give problemer. En anden kendt bug er de meget brede knapper i Internet Explorer 7. Dette problem kan løses med følgende følgende bug fix: problemer med padding på knapper i IE.
