Invalid value for the Firefox property: calc ()

Question

I have a line-height item with calc() :

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

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

It works fine in Chrome, but Firefox Developer Tools says this is an invalid property value.

I am sure that I am missing something that should be obvious.

For reference only:

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

Thanks.

Answer 1

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

Since 3rem / 2 is exactly 1.5rem, you can simply write this number as a workaround.