css rem unit not working with font declarations
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?
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.
This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here