Firefox Button Height Fix

Discussion

1. MaxArt

   I know the feel. 2px is like a magic number. Terrible.

   Is it strange that lately I have the feeling that most of the time spent fixing browser render differences is because of Firefox?
2. Herhur

   Strange, I’ve designed something like twitter’s bootstrap for buttons for one project and I didn’t have to add negative margins to make buttons exactly the same as s…
   Have you tried setting the same line-height?

   @MaxArt
   I have a similar feeling but about chrome. All my css works perfectly in Fx16+, IE8+, Opera but chrome always misaligns some grids or other stuff…
• Simon Boudrias

  Actually, Firefox simply ignore line-height on input “button” type elements (submit, reset, button). And they don’t plan on fixing it – you know, it may break the web…

  https://bugzilla.mozilla.org/show_bug.cgi?id=697451
3. Catalin Rosu

   David, I’m not so sure about your ultimate solution. border: 0 and padding: 0 for input::-moz-focus-inner were always enough to solve this issue on Firefox.
4. David Walsh

   I’ve had a few saying that the margin shouldn’t be necessary so I’ll continue looking, but no suggestion presented to me has made a budge. Will update as necessary.
5. Catalin Rosu

   I’ve made these buttons a while ago: https://github.com/catalinred/css3-patterned-buttons and they have the same height whether you use buttons, anchors or inputs. Sorry for the plug :)
6. Joacim Boive

   Any particular reason for not using button elements for the button elements?

   Problem solved and the HTML should be tad more semantic because of it.
7. Lim Chee Aun

   I’ve also recently bumped into this bug and found that it’s dependent on the font used. Testcase: http://jsbin.com/udesed/1
8. Catarax

   Thanks for the fix! The rendering of Mozilla Firefox is really bad at some point.
9. Eliazer Braun

   David, Thanks for this fix and explanation..
   I have been stuck with this bug now for over a year and was only able to target ff via the following ugly

   @-moz-document url-prefix() { /* moz hack - sorry no other choice*/
    hack{} 

   So i am glad that a simpler css fix is now available,
   Now, Is there any legit reason why ff has implemented/interduced this bug?
10. Šime Vidas

    First image in the article, the left-most button reads POVIJEST which is Croatian for “history”. How did that happen?
11. Dennis Gaebel

    I noticed that submit inputs default height is drastically different on Firefox compared to Chrome. Chrome has a bit more padding and Firefox has less. Don’t know who’s wrong here but it’s totally annoying. I have your method in the CSS of my demo commented out, but I have to go in the other direction with my margins to adjust in order to match Chrome.
    http://codepen.io/grayghostvisuals/pen/zlGab“>http://codepen.io/grayghostvisuals/pen/zlGab” rel=”nofollow”>http://codepen.io/grayghostvisuals/pen/zlGab

    http://codepen.io/grayghostvisuals">
12. Marc

    This is a long-standing problem with Firefox and input line-height, which is set as “normal !important” in the browser’s base styles and can’t be overridden by author’s.

    The only solution I’ve found is to give elements that have to be horizontally aligned with inputs the same line-height, “normal”.

    They are not fixing this anytime soon and it’s been a known bug for years, but they hope to create an usable operating system based on Firefox (ironic).

    Bug report and discussion: https://bugzilla.mozilla.org/show_bug.cgi?id=349259
• Ibrahim Awwal

  Thanks for linking to the Bugzilla report! It turns out that they did fix the bug eventually, so now the correct fix should be to set line-height for inputs to 1.0 instead of normal.
13. Mathew Porter

    Ive never really had this issue, but might have had the resets set as global resets anyway
14. Surjith SM

    Many Thanks.

    i was tottally mad with 2px issue. Now its fixed. only with border:0 and padding:0. But not for input. i applied for button.

     button::-moz-focus-inner { 	border: 0; 	padding: 0; }
15. Roman Arkhipov

    Marc, thanks for the hint.

    My solution:

    .button {
    line-height: normal !important;
    …
    }
16. Martha Kent

    After having the same problem in firefox, I’ve decided to try your solution. Although some have not recommended it, it worked for me. So, thanks…
17. don hallow

    Roman’s solution was the first one I’ve tried and it seems to also work fine for me.
18. Visual C# Kicks

    Thanks for this. I too only see the border and padding set to 0 solution everywhere but it didn’t solve it quite all the way. This did it!
19. Yves Van Broekhoven

    The input margin trick fixed my problem.

    Thx!
20. Steve

    Thanks for the write up David

    Can I make the suggestion that you update your StackOverflow.com profile so that you are not “user1878132” ;-)

    It’s always nice to be able to put a proper name to a user.
21. Vinay Raghu

    Ran into this bug today. Thanks for the article…however, the -2px fix didn’t work. It worked like a charm without the -2px rules

    Thanks a lot!
22. Blackeye

    got that problem also,

    not only on buttons also on font-awesome almost in every case i need to fix firefox
    just googled to see if there is anyone out there having same issues
23. André

    Thanks for this post. The solution without the -2px worked fine! I was cracking my head to find a solution to this :)
24. Dave

    2 years later and I still encounter this problem in Firefox.

    My solution is thus:

    button::-moz-focus-inner { border: 0; padding: 0; }
    .mybuttonclass { height: 2em; line-height: 2em; box-sizing: border-box; }
    

    With .mybuttonclass applied to your BUTTON and ANCHOR tags.

    For me, the just setting the box-sizing property was needed to get it to work. The value could be content-box or padding-box and still it would work.

    Notice I’m using BUTTON tags rather than INPUT, but the problem still applies.
25. Todd

    I’ve noticed recently this doesn’t seem to happen in Firefox anymore. I wrote a Pen a while back to create equal size buttons, using different button elements:

    http://codepen.io/tgallimore/pen/jbPzrm

    This pen now shows different size buttons in Firefox. But if you remove the styles that use ::-moz-focus-inner, all buttons appear the same size.

    Can anyone shed any light on this for me? I’m trying to figure out if it’s still needed or not.
26. Drew

    Ran into something related to this, and it seems like a shortcut that was taken in implementing focus outlines. If you set border:0 in -moz-focus-inner then focused buttons will actually shrink, which seems absurd. The default value of 1px seems to be built into the size of the rendered button, and that “border” is set around the line-height instead of an outline around the box. This leads to the extra, secret sizing (which would take, yep, 2px to compensate for), and becomes obviously absurd in cases where the value is set to something other than 1px:

    http://codepen.io/anon/pen/pgjYxG
27. Nima Hedayati

    Try setting line-height to normal and set a height for the submit input instead, like so:

    input[type="submit"] {
       line-height: normal;
       height: 20px; 
    }
    

    It works for me and no need for any hacks.
28. Andrés S

    Thanks Lim Chee Aun! My problem was I forgot to set font family on that button, so silly, but I wasn’t noticing it