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.
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
Firefox
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With