Cross Browser CSS Opacity

The CSS property opacity is unfortunately one of those properties that isn’t well supported… Kinda. Current versions of Firefox, Safari, Opera, and Chrome support it just fine. But, of course this leaves the bastard child: Internet Explorer. But are you really surprised?

Luckily there’s a trick to work around Internet Explorer’s inadequacy. It involves the filter property, along with hasLayout.

1
2
3
4

div {
  filter: alpha(opacity = 70);
  zoom: 1;
}

This is what is needed to use the opacity property in Internet Explorer. The zoom property is used to set the element’s hasLayout to on. You can read more about hasLayout here.

The following example is cross browser compatible:

1
2
3
4
5
6
7

div {
  opacity: 0.7;
  filter: alpha(opacity = 70);
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  zoom: 1;
}

-mox-opacity if for of Mozilla browsers (ie: Netscape), and -khtmo-opacity for old Safari browsers.

Here is a cross browser demo of the CSS opacity property.

View Example