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.