Over a million developers have joined DZone.

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

DZone's Guide to

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

· Java Zone
Free Resource

Learn how to troubleshoot and diagnose some of the most common performance issues in Java today. Brought to you in partnership with AppDynamics.

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">
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

Understand the needs and benefits around implementing the right monitoring solution for a growing containerized market. Brought to you in partnership with AppDynamics.


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

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}