On a recent web project at work I was using box-sizing: border-box on all elements for the first time. As Chrome is my main development browser these days (and probably soon will be replaced by Canary), I only had a a late look on the site with Firefox. I discovered that the height of some elements was going crazy. More precisely: the elements which I used min-height on were way too high.
Some Google research on “firefox min-height bug problem” did bring the connection between box-sizing: border-box, min-height and padding. Turns out that there is a known bug regarding these topics within Firefox since ages some time: If an element is using (vertical) padding, min-height and box-sizing, Firefox simply adds the padding to the min-height.
As open source has always an answer (don’t quote me on this one), Shane Tomlinson wrote a nice article on the height problem and developed a JavaScript function/test that detects if this cruel behavior is active in the current browser.
I did take his function a step further and used it in a Modernizr test.

To sum it all up:

Problem

Firefox has a known bug regarding elements with applied border-sizing:border-box, padding and set min-height. It adds the padding to the min-height, resulting in an element that is too tall.

Solution(s)

• Shane Tomlinsons article
• My Modernizr test on github
• My JSFiddle with the test in action

My JSFiddle embedded