Box-sizing and min-height CSS trouble within Firefox
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.