Add conditional CSS to compensate for Firefox line-height bug

[adamwathan]

Firefox renders the bounding box of the text content of select elements with an additional 2px of height for some bizarre reason. For example, if you say line-height: 20px, the actual height will be 22px. No other browser does this.

This PR adds a @supports condition on an arbitrary Firefox-only CSS property to be able to override the line-height with a calc() value that subtracts the extra 2px.

The most unfortunate part of this is we have to decide whether to handle this annoying crap automatically for anyone who overrides the lineHeight on their select elements, or if we should just document the issue and have people account for it themselves if they want to change the line-height.

This PR currently handles it automatically but I admit it feels like a bit of an overreach, as there's no way to opt-out of it if someone wanted to for whatever reason. The code to handle it is also unpleasant 😬

[pixlforge]

Hey @adamwathan, thanks for the work. I think it would be better to document the issue as it is a firefox quirk and let devs deal with it, but that's just my opinion.

[knowler]

I encountered this on a form heavy site that I did. I found that setting explicit heights for my form elements fixed the issue. Here’s an example I put together based on what I had set for my original Input and Select components: https://codepen.io/knowler/pen/xodKBJ

[tlgreg]

Personally, I don't feel weird about using height explicitly, but if you want to avoid that then the current "@supports implementation" seems good, just hope Firefox doesn't change it from 2px to something else.

[adamwathan]

This Firefox bug is fixed in Firefox 70 which will be out this month, so I think it's best to just leave this alone 👍