Jeg har ofte oplevet problemer med at f\u00e5 teksten p\u00e5 is\u00e6r grafiske knapper til at st\u00e5 korrekt. Sidste gang var det den lodrette alignment p\u00e5 knapper i Firefox, der drillede. Teksten p\u00e5 knappen sad for lavt og vertical alignment virker ikke p\u00e5 teksten p\u00e5 en\u00a0 submit knap.<\/p>\n
I f\u00f8rste omgang lykkes det at opn\u00e5 et rimeligt resultat med at bruge padding-bottom for at f\u00e5 h\u00e6vet teksten p\u00e5 knappen op. Desv\u00e6rre \u00f8delagde denne Firefox l\u00f8sning til geng\u00e6ld oplevelsen i b\u00e5de Chrome og alle alle IE browserne. Og l\u00f8sningen endte i bedste fald i et kompromis, hvor teksten sad en smule for h\u00f8jt i IE og Chrome og en smule for lavt\u00a0 i Firefox.<\/p>\n
En grundig s\u00f8gning p\u00e5 “vertical alignment input button” viste, at problemet var velkendt, og jeg fandt dette gode fix p\u00e5 stackoverflow: Fix af bug med vertical alignment p\u00e5 input submit element<\/a>:<\/p>\n I mit tilf\u00e6lde var det border propertien, der l\u00f8ste problemet. Og linjen med padding kunne fjernes, da jeg havde fjernet eksisterende padding p\u00e5 knappen for at f\u00e5 visningen s\u00e5 ensartet som muligt i de forskellige browsere.<\/p>\n Fikset med moz-focus-inner\u00a0 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.<\/p>\n Browsernes forskellige default rendering af tekst og padding p\u00e5 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\u00f8ses med f\u00f8lgende f\u00f8lgende bug fix: problemer med padding p\u00e5 knapper i IE<\/a>.<\/p>\n <\/p>\n","protected":false},"excerpt":{"rendered":" Jeg har ofte oplevet problemer med at f\u00e5 teksten p\u00e5 is\u00e6r grafiske knapper til at st\u00e5 korrekt. Sidste gang var det den lodrette alignment p\u00e5 knapper i Firefox, der drillede. Teksten p\u00e5 knappen sad for lavt og vertical alignment virker ikke p\u00e5 teksten p\u00e5 en\u00a0 submit knap. I f\u00f8rste omgang lykkes det at opn\u00e5 et […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[62,100,127,149],"_links":{"self":[{"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/posts\/922"}],"collection":[{"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/comments?post=922"}],"version-history":[{"count":0,"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/posts\/922\/revisions"}],"wp:attachment":[{"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/media?parent=922"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/categories?post=922"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/tags?post=922"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
input::-moz-focus-inner {\/*Remove button padding in FF*\/\n border: 0;\n padding: 0;\n}<\/pre>\n<\/blockquote>\n