Fixing IE's Opacity Inheritance

Jan 17th, 2012  »  3 comments

Child elements ignore the parent's opacity in Internet Explorer.

In Internet Explorer 7, 8, 9, non-static child elements do not inherit the opacity of the parent.

<div style='opacity: 0.5; filter: alpha(opacity=50);'>
    All of this text should have a 50% opacity...
    <div style='position: relative'>But this line displays at full opacity in IE7 and IE8.</div>
    <div style='position: absolute'>And this line displays at full opacity in IE7, IE8 and IE9.</div>
</div>

This bug is triggered when the child element has any position other than static, regardless of the parent's position value (static, fixed, absolute, or relative). IE9 only has a problem when the child element has a fixed or absolute position, and the parent element has a static position. Maddeningly, IE7 and IE8 have other opacity related bugs which may derail alternative approaches.

Workarounds

• IE9: Give the parent a non-static position.
• IE8: Have the child inherit the filter style.
• IE7: Have the child inherit the filter style and give the parent a non-static position.

<div style='opacity: 0.5; filter: alpha(opacity=50); position: relative;'>
    All of this text has 50% opacity...
    <div style='position: relative; filter: inherit;'>Including this line.</div>
    <div style='position: absolute; filter: inherit;'>And this line.</div>
</div>

Alternatively, a new alpha filter could be set on the child elements. This could be useful in situations where inheriting the parent's filters is undesirable.

<div style='opacity: 0.5; filter: alpha(opacity=50); position: relative'>
    All of this text has 50% opacity...
    <div style='position: relative; filter: alpha(opacity=50);'>Including this line.</div>
    <div style='position: absolute; filter: alpha(opacity=50);'>And this line.</div>
</div>

A caveat to having a filter on the child element is that IE9 will apply both the child's filter and the parent's filter and/or opacity. The examples above effectively have a 25% opacity in IE9 (50% of 50%). Use conditional CSS to target IE8 and lower when setting the child's alpha filter.

Hey You

Follow me on Twitter, Github, or RSS. Why should you? I'm meticulous and have a lot of free time. Sometimes good things come out of that.

Comments

Anonymous2 months agoReply

My god man, that is an awesome post and you've helped me make the impossible possible.

jakea month agoReply

This worked for me as well!

Joel2 days agoReply

Thank. You. So. Much!

Leave a Comment