Rem Line-height Doesn’t Work In Pseudo Elements In IE

I recently noticed a problem with working with REM CSS units in IE browsers. The REM CSS unit was introduced in CSS3 and stands for root EM which will use the root element for relationally units instead of it's direct parent.

But with REM CSS units there are a few problems that you will face with IE, first of all browsers IE8 or lower do not support REM so you will need to product a fallback to any elements that use this, the fallback is the pixel value for the REM.

    line-height: 100px;
    line-height: 10rem;

Newer browsers that support REM will use this value while other browsers that do not support this will fallback to pixels.

The newer browsers such as IE10/11 do support the REM unit and every unit will work fine on your website, but IE has another problem with the REM unit as it will not work inside pseudo elements on the line-height property.

If you want to set the measurement unit of a pseudo element it will work in other browsers but not IE, as you can see in the following example I will use the CSS.

    content: attr(data-text);
    border: 1px solid #000;
    line-height: 10rem;
<div class="content-demo" data-text="Testing this content will not work in IE">

Now view this section in IE and in other browsers, as you can see from the image above the line-height property does not work in IE but will work in other browsers. To fix this problem you need to revert back to pixel measures for it to work in IE.

IE Support Tracker

This is a known issue with the Microsoft team and you can track it's progress here.

IE Bug Report

Back to top

Learn how to code with Treehouse

  • Learn projects with access to 1000+ videos
  • Practice live with our Code Challenge Engine
  • Get help in our members-only forums

Start with a 7 day free trial