Firefox: calc() invalid property value

Question

I have an element with a line-height set with calc():

line-height: calc(3rem / 2);

Demo: http://codepen.io/Ghodmode/pen/vLxZZd

It works fine in Chrome, but Firefox's Developer Tools says that it's an invalid property value.

I'm sure I'm missing something that should be obvious.

Just for reference:

• https://developer.mozilla.org/en/docs/Web/CSS/calc
• http://caniuse.com/#search=calc

Answer 1

This is a known issue. Firefox does not currently support calc() values on properties that accept either lengths or numbers, of which line-height is one such property. See bug 594933.

Since 3rem / 2 is exactly 1.5rem you can just hardcode that amount instead as a workaround.