Okay, nevermind, got it. The lines:
// IE has trouble with opacity if it does not
have layout
// Force it by setting the zoom level
elem.zoom = 1;
are referring to the .hasLayout property of elements in MSIE. There's
a nicely extensive document on it over at
http://www.satzansatz.de/cssd/onhavinglayout.html,
and a jQuery oriented bit of knowledge at http://realjenius.com/node/633,
which points back to the delightfully opinionated and informative
http://www.haslayout.net/haslayout. The upshot of it is that...
the <span> element (among others), by default, has a .hasLayout of
false. In order to adjust opacity on an element, MSIE requires it
to .hasLayout == true. I was using a <span> element as my wrapper,
and thus affected by this.
As near as I can tell, elem.zoom = 1; is no longer a satisfactory
workaround for MSIE's .hasLayout property (and was also the cause of
the wiggle when .hasLayout got toggled) as .zoom is what got
eliminated thus breaking MSIE 8. My chosen workaround (there are
several possible) was to use a display: inline-block instead of just
the default display: inline.
If you think you're encountering this issue, here's some javascript
to test MSIE with:
$(".myspan").click(function() {
alert($(this).get(0).currentStyle.hasLayout); // will return
false.
//$(this).get(0).zoom = 1;
$(this).css({ "display" : "inline-block" });
alert($(this).get(0).currentStyle.hasLayout); // will return
false
if using the zoom line, true if setting display to inline-block
$(this).css({ "filter" : "alpha(opacity=30)" }) // will only
work
if previous line alerted "true"
//$(this).fadeTo(300, $(this).hasClass("selected") ?
1.00 : 0.40);
$(this).toggleClass("selected");
});
And now I'm done.
