Pointer events: none, filter, works in ie8 and anywhere, not ie9
As I have seen h开发者_JAVA技巧ere, a filter can be used to simulate a cross browser version of
pointer-events: none;
However, this just doesn't work in IE9, nor does it in the "emulate IE8" version in IE9. A native installation of IE8 handles it fine, however. Is there any solution that makes it work for IE9?
You're right - AlphaImageLoader filter has been removed from IE9. This was done so that it doesn't conflict with the standards compliant methods. In this case, pointer-events: none
, which now works in IE9.
If you're using a conditional comments to target IE for the filter fix, change them to target only IE8 and below. Try changing <!--[if IE]>
to <!--[if lte IE 8]>
Edit: I've since come across this again and it appears that pointer-events: none
does not work in IE9 (not for HTML elements anyway). I thought this was working, but on re-testing neither method works for click-through on IE9. Perhaps I had my IE9 in a compatibility mode.
It's not ideal at all, but you could force IE9 into IE8 mode via the <meta>
tag switch:
<!--[if ie 9]><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"><![endif]-->
Apologies for the misinformation, I'll keep looking into this.
Update Sept 24 2012:
The wonderfully useful caniuse.com has more information on pointer-events
for HTML. Support in IE10 is still unknown and it appears that Opera does not support this property either. I would advise against using pointer-events
for now unless you're specifically targeting Webkit/Mozilla.
pointer-events only works in webkit, mozilla browsers in html.
However pointer-events works on svg elements in internet explorer.
There is a good modernizr plugin https://github.com/ausi/Feature-detection-technique-for-pointer-events/blob/master/modernizr-pointerevents.min.js to test the existence of pointer-events
If you are using the pointer events to just add some sort of texture over the top you can replace a div with a svg element
if( !Modernizr.pointerevents )
{
$('#texture').replaceWith('<svg id="texture"/>');
}
精彩评论