Niels Gamborgs online notesbog

Problemer med padding på knapper i IE

juli 11th, 2009. Kategori: Browser bugs and fixes

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

  1. 1 Trackback(s)

  2. apr 22, 2011: Lodret alignment på knapper i Firefox og Explorer | Blog om webudvikling

Skriv en kommentar