CSS: Opacity is not inherited in Internet Explorer

Updated . Posted . Visible to the public. Deprecated.

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.

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!

Arne Hartherz
Last edit
Michael Leimstädtner
Keywords
ie8, ie7
License
Source code in this card is licensed under the MIT License.
Posted by Arne Hartherz to makandra dev (2014-01-30 13:55)