css rem unit not working with font declarations

css, html, internet-explorer, internet-explorer-10

Solution

The rem unit is not supported in IE for the font shorthand. It is a known bug. Hopefully this will be fixed. The only work-around I know is to specify the font-size again after the font property, or not use the shorthand when using rem.

The bug report is https://connect.microsoft.com/IE/feedback/details/772679/ie10-not-recognizing-font-decloration-when-rem-is-used-as-font-size-unit-of-measure

Update: note that this has been fixed as of IE11.

Problem

This css property is not working on IE10: ``` font: bold 3rem/6rem Arial; ``` However, if I split this property to separate properties it works: ``` font-size: 3rem; font-weight: bold; line-height: 6rem; font-family: Arial; ``` I can also use PX instead and it also works: ``` font: bold 48px/96px Arial; ``` You can try it on every page with IE debugger. Why is this property not working on IE but on all other browsers?

Original source