Pointer Events: None, Filter, Works in Ie8 and Anywhere, Not Ie9

Pointer events: none, filter, works in ie8 and anywhere, not 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.

CSS issue in IE8 only

Problem seems to be that IE-8 (and only that ..) treats spans with just a space inside as empty (self-closing tags).

Google adds that space between the keywords just for this reason, so that they break when needed.

Fortunately they have a added a class to that span so we can trick it with CSS by doing

.statusItemSep_gsnb:after{content:' ';}

this puts a space right after them and makes IE behave.

Working example at http://jsfiddle.net/gaby/V8uHF/

pass mouseover event through dragging element

No, trust me; I've tried

Came across the exact same issue as you and ended up banging my head against the wall and finding only what you did; pointer-events work, but not in IE9.

You will have to use js to overcome this - sorry.

All the best,

-Lededje

Tablesort not working correctly in IE

There was a mismatch in the class names that were assigned by your Table Sorter JS and the ones mentioned in the CSS you had included.

For example, the following:

Class Name for Header in JS = tablesorter-header

Class Name for which style is defined in CSS = header

Similarly for ascending and descending sorting. I added the following in the CSS code area in Fiddle and the images are appearing.

table.tablesorter thead tr .tablesorter-header {
    background-image: url(http://tablesorter.com/themes/blue/bg.gif);
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}
table.tablesorter thead tr .tablesorter-headerAsc {
    background-image: url(http://tablesorter.com/themes/blue/asc.gif);
}
table.tablesorter thead tr .tablesorter-headerDesc {
    background-image: url(http://tablesorter.com/themes/blue/desc.gif);
}
table.tablesorter thead tr .tablesorter-headerAsc, table.tablesorter thead tr .tablesorter-headerDesc {
    background-color: #8dbdd8;
}

---

For Question 2 - Seems like there could be some issue with the Table Sorter JS that you are including. Try the one available here.

Click events stop working after replacing attribute of use element in svg (Win7/IE11)

Yes, this is a known IE bug. https://connect.microsoft.com/IE/feedback/details/796745/mouse-events-are-not-delivered-at-all-anymore-when-inside-an-svg-a-use-is-removed-from-the-dom

If you can, you should set pointer-events: none; for the use tag in your CSS. It's crazy, but it should work.

---

Related Topics