pointer-events: none in IE
The pointer-events is a Mozilla hack, also supported by webkit, but Internet Explorer will probably never support it. I have discovered, however, that the property does affect borders in IE. In other words: an element with
pointer-events: none; lets mouse events through to the border of elements beneath it.
A little while ago I was working on a project where I had to display appointments on an interactive calendar. Every half hour block was an anchor element that triggered a modal pop-up to book an appointment for that half hour. Booked appointments were shown on top of the anchors, hence blocking the user on the client-side from booking new appointments for that period.
For a number of reasons it made more sense to separate the appointments from the hour-anchors and layer their containers on top of each other. The
pointer-events CSS property would make it possible to click through the empty holes in the appointment layer in order to book a new appointment.
When testing this in IE however, I discovered that only my one pixel border was actually responding to the mouse events.
By simply applying slightly different CSS for IE, I managed to make it do what I wanted it to do. Below you can find the CSS for the different browsers.
All browsers except for IE
display: block; float: left; width: 90%; height: 18px; padding: 2px 5%; border-bottom: solid 1px #e2e2e8; color: transparent; text-indent: -9999px;
display: block; float: left; width: 90%; height: 0; zoom: 1; padding: 0 5%; border-top: solid 22px #FFF; border-bottom: solid 1px #e2e2e8; color: transparent; text-indent: -9999px;
In the snippet above, the clickable area for Internet Explorer is all border. The user is actually clicking the border of the anchor tag, which works in all versions of IE.
I hope this helps.