Read more

CSS: Opacity is not inherited in Internet Explorer

Arne Hartherz
January 30, 2014Software engineer at makandra GmbH

We no longer know what "Internet Explorer" is.

Non-static elements will not inherit their parent's opacity in IE for no good reason. This can lead to unexpected behaviour when you want to fade/hide an element and all its children.

Illustration UI/UX Design

UI/UX Design by makandra brand

We make sure that your target audience has the best possible experience with your digital product. You get:

  • Design tailored to your audience
  • Proven processes customized to your needs
  • An expert team of experienced designers
Read more Show archive.org snapshot

To fix it, give the parent element defining the opacity a non-static positioning. For example:

.parent {
  opacity: 0.2;
  position: relative; /* for IE */
}

While the linked article describes this problem for IE9 and below, I have encountered the same issue in IE10 and IE11.

Just go away, Internet Explorer!

Posted by Arne Hartherz to makandra dev (2014-01-30 14:55)