Over a million developers have joined DZone.

REM Line-Height Doesn't Work in Pseudo Elements in IE

· Java Zone

Navigate the Maze of the End-User Experience and pick up this APM Essential guide, brought to you in partnership with CA Technologies

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.

1..main-content
2.{
3.    line-height: 100px;
4.    line-height: 10rem;
5.}

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.

1..content-demo:after
2.{
3.    content: attr(data-text);
4.    border: 1pxsolid#000;
5.    display:block;
6.    line-height: 10rem;
7.}
1.<div class="content-demo"data-text="Testing this content will not work in IE">
2.     
3.</div>

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

Thrive in the application economy with an APM model that is strategic. Be E.P.I.C. with CA APM.  Brought to you in partnership with CA Technologies.

Topics:

Published at DZone with permission of Paul Underwood, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}