Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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

Verify, standardize, and correct the Big 4 + more– name, email, phone and global addresses – try our Data Quality APIs now at Melissa Developer Portal!

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

Developers! Quickly and easily gain access to the tools and information you need! Explore, test and combine our data quality APIs at Melissa Developer Portal – home to tools that save time and boost revenue. Our APIs verify, standardize, and correct the Big 4 + more – name, email, phone and global addresses – to ensure accurate delivery, prevent blacklisting and identify risks in real-time.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}