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.
Discovery
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.
The solution
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;
IE
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.