css - Button height inconsistency (cross-browser) - Stack Overflow
Stack Exchange
log in
|
careers 2.0
|
chat
|
meta
|
about
|
faq
Stack Overflow
Questions
Tags
Users
Badges
Unanswered
Ask Question
Button height inconsistency (cross-browser)
up vote
4
down vote
favorite
I'm having a problem whilst setting the height of a button. Basically I can't manage to have it cross-browser. With Firefox, it is higher than normal, without any reason.
Here it's a screenshot (Firefox, Safari and Opera, in this order):
And here the code: jsfiddle.net/TMUnS/2/
I also tried adding some specific declarations I found on the web, but actually they just reduced the height a bit, but still, they aren't the same (in the same order):
And here the code: jsfiddle.net/TMUnS/4/.
How could I fix this?
css button cross-browser box-model
share|improve this question
asked
Feb 8 at 1:46
Entropy
1,476116
94% accept rate
Well, this just happens and this question has been asked endlessly. Inputs and pixel perfection don't mix well most of the time due to browser inconsistencies. I suggest you start with something like normalize.css and then adjust from there. – elclanrs Feb 8 at 1:53
I already have a reset, but it doesn't seem to reset this stuff. – Entropy Feb 8 at 2:07
feedback
4 Answers
active
oldest
votes
up vote
2
down vote
accepted
Firefox has this funny thing called -moz-focus-inner. I'm not totally sure what it's for, I just know that you sometimes need to do this to get buttons to behave:
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner
padding:0;
border:0;