Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Firefox buttons have padding, Chrome buttons do not

How do I get my <button>s to look consistent in Firefox and Chrome? Is there a non-conditional CSS solution? Right now, Firefox's buttons have extra padding even though YUI's CSS Reset made the padding 0.

HTML button

I discovered that to get the same appearance, Chrome needs to have double the padding.

            #fileActions button {
                padding: 0.2em;
            }

@media screen and (-webkit-min-device-pixel-ratio:0) {
            #fileActions button {
                padding: 0.4em;
            }
}

Chrome

Chrome computed style

Firefox

firefox computed style

like image 252
JoJo Avatar asked Feb 25 '11 20:02

JoJo


Video Answer


1 Answers

Firefox gives buttons something called inner focus, this allows it to draw the dotted focus line. There is a rule in forms.css for it, which gives it 1px of border and 2px of left and right padding. I don't know whether it's possible to override this from a web page.

like image 105
Neil Avatar answered Oct 25 '22 12:10

Neil