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!

jacklmoore.com
Arne Hartherz
makandra.com
Say thanks5
Last edit
Michael Leimstädtner
Keywords
ie8, ie7
License
Source code in this card is licensed under the MIT License.

Related cards:

The Ruby Object Model

In Ruby (almost) everything is an Object. While this enables a lot of powerful features, this concept might be confusing for developers who have been programming in more static languages, such as Java or C#. This card should help understanding t...

Using Firebug Lite to inspect HTML in Internet Explorer and other browsers

You know Firebug as a Firefox extension but there is also a "Lite" version which runs purely off JavaScript.

Though all major browsers offer inspection tools you may like the Firebug style. Also, for me this is a lot better than the IE8 develop...

The JavaScript Object Model: Prototypes and properties

Speaker today is Henning Koch, Head of Development at makandra.

This talk will be in German with English slides.

Introduction

As web developers we work with JavaScript every day, even when our backend code uses anothe...

How to create memory leaks in jQuery

jQuery doesn't store information about event listeners and data values with the element itself. This information is instead stored in a global, internal jQuery cache object. Every time you add an event listener or data value to a jQuery object, ...

Lightning Talk: Coverage based Test Case Prioritization in Ruby on Rails

For my computer science bachelor's thesis I programmed and evaluated a CLI Test Case Prioritization (TCP) tool for makandra. It has been written as a Ruby Gem and was tested and evaluated against one Ruby on Rails project....

How to solve Selenium focus issues

Selenium cannot reliably control a browser when its window is not in focus, or when you accidentally interact with the browser frame. This will result in flickering tests, which are "randomly" red and green. In fact, this behavior is not random at...

CSS3 Pie: Element not properly redrawn

Pie sometimes does not properly redraw elements upon changes. This often happens when the change comes from somewhere further up the DOM.

Consider something like:

<ul>
  <li class="active"><div class="content">Act...

CarrierWave: Processing images with libvips

When you write your next CarrierWave uploader, consider processing your images with libvips instead of ImageMagick.

Reasons for libvips

There are several **upsi...

How to create giant memory leaks in AngularJS (and other client-side JavaScript)

This guide shows how to create an AngularJS application that consumes more and more memory until, eventually, the browser process crashes on your users.

Although this guide has been written for Angular 1 originally, most of the advice is relevant...

PSA: "index: true" in Rails migrations does not work as you'd expect

Several Rails migration methods accept index: true as an option to create an index. In some cases (like #add_column), this option is silently discarded. Know what you are doing, or use #add_index instead.

Example

Consider the following ...

Posted by Arne Hartherz to makandra dev (2014-01-30 13:55)
This website uses short-lived cookies to improve usability.
or learn more