Blog om foto, web og brugervenlighed

Problemer med padding på knapper i IE

Internet explorer har en bug, der automatisk giver padding til knapper (knapper i form af  ‘button’ og ‘submit’  elementerne i input tag).  Det kan i visse tilfælde være meget irriterende . Især hvis teksten på knappen er lang, da knappen så får alt for meget luft omkring teksten. Det giver meget brede knapper som kan vælte designet.

Jeg er stødt på problemet  med de  meget brede knapper i IE en del gange efterhånden. Derfor dette blogindlæg.

Løsningen er simpel:

input {
    overflow: visible;
    padding: 0 4px;
}

Efterfølgende skal du så selv sætte en passende padding på dine knapper, da ovenstående fix fjerner paddingen helt.

Du skal dog være opmærksom på at denne løsning kan have visse bivirkninger eller måske ikke virke efter hensigten, hvis din knap er placeret inde i en tabel.

Se evt. denne post for en diskussion af problemer med padding på knapper placeret inde i en tabel:  IE button width fix