Vince Vince - 2 months ago 37
CSS Question

Firefox: calc() invalid property value

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:



Thank you.

Answer

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.

Comments