Recovered from the Wayback Machine.
Another break between IE7 and IE8 is the support for opacity.
In previous versions of Internet Explorer, Microsoft used its own custom filters in order to implement opacity. This has been known for some time and libraries manage opacity for old and new browsers by using code like the following, in JavaScript:
// cross-browser adjust opacity function
function setOpacity(obj,val) {
obj.style.opacity = val;
obj.style.MozOpacity=val;
obj.style.KhtmlOpacity=val;
val*=100;
obj.style.filter = "alpha(opacity="+val+")";
}
It’s a trick that takes advantage of JavaScript’s dynamic prototyping to “set” any possible combination of opacity properties, including the CSS3 opacity, the older Mozilla opacity, as well as IE’s opacity filter. Of course now, we can pretty much drop anything but the CSS3 opacity, and the IE filter:
// cross-browser adjust opacity function
function setOpacity(obj,val) {
obj.style.opacity = val;
val*=100;
obj.style.filter = "alpha(opacity="+val+")";
}
This will work with IE6 and IE7, but not IE8. The reason why is that Microsoft dropped implementation of a proprietary functionality called hasLayout, which the company’s opacity filter was dependent on (at least, that’s what I’ve read). This is good, because hasLayout is a Bad Thing.
Unfortunately, this also “broke the web” in that Microsoft, in IE8 beta 1 at least, didn’t bother to replace the now missing opacity filter with support for the CSS3 opacity filter. True, CSS3 isn’t a “released spec” yet, but every other browser–Firefox, Safari, and Opera–supports CSS3 opacity.
I’ve explored the online discussions related to IE8 and opacity, and there are rumors that the long handled Alpha opacity filter will work, but I’ve not found that this to be true, and I’ve not found anything at Microsoft on a workaround.
At this time, and to the best of my knowledge, to get opacity to work with IE8, you’ll have to add the IE compatibility meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=7" />
You put this meta element right after the title element. Of course, you lose the “good” standards stuff that comes with IE8 if you do this. It’s a damned if you do, damned if you don’t situation: either opacity doesn’t work with IE8, or you lose the stuff that does work correctly with IE8.
I’m also finding another problem with IE8: adding an onclick event handler to a DIV element seems to only be sensitized to whatever content is in that element, not the element itself. So if you have centered text in the DIV element, only the text is sensitized to the onclick event, not the entire block.
This impacts on many Ajax applications, including most accordion functionality, and not just on mine. For instance, Rico’s Accordion widget doesn’t work with IE8 if the person clicks anywhere but the text. To recapture this functionality, you’ll again have to use the compatibility meta tag.