Menu
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?
878
In CSS rem stands for “root em”, a unit of measurement that represents the font size of the root element. This means that 1rem equals the font size of the html element, which for most browsers has a default value of 16px. Using rem can help ensure consistency of font size and spacing throughout your UI.
The <li> elements inside the <ul> with a class of ems take their sizing from their parent. So each successive level of nesting gets progressively larger, as each has its font size set to 1.3em — 1.3 times its parent's font size. To recap, the rem unit means "The root element's font-size" (rem stands for "root em").
Conclusion. CSS gives us many tools to make our pages responsive but rem is one of the most important as it allows you to scale your page relatively to the single html (root) element of the page.
This behavior is caused by the fact that REM inside media queries always takes the default value of the browser font size, which is often 16px . However if the user changes this default browser setting, REM will take that value. This means that the accessibility preferences a user might have specified are accommodated.
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.
56
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
