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
padding. Turns out that there is a known bug regarding these topics within Firefox since
ages some time: If an element is using (vertical)
box-sizing, Firefox simply adds the padding to the
I did take his function a step further and used it in a Modernizr test.
To sum it all up:
Firefox has a known bug regarding elements with applied
padding and set
min-height. It adds the padding to the min-height, resulting in an element that is too tall.