如何使指针事件在IE中工作？

Question

My image is in front and the text is at the back. I want to select the text at the back. This works in chrome and firefox. How do I make it work in IE also.

<div id="parent-street-view">
    <div id="map_canvas">This is supposed to be visible and selectable</div>
    <img class="overlay-pollution"
    src="http://www.lorempixel.com/400/400" />
</div>​

<style>
@media print {
    .gmnoprint {
        display: none;
    }
}

@media screen {
    .gmnoscreen {
        display: none;
    }
}

#parent-street-view {
    position: relative;
}

#map_canvas {
    position: absolute !important;
    width: 500px;
    height: 400px;
    background-color: rgb(229, 227, 223);
    overflow: hidden;
    -webkit-transform: translateZ(0);
    z-index: 0;
}

#parent-street-view .overlay-pollution {
    width: 500px;
    height: 400px;
    position: absolute;
    z-index: 100;
    opacity: 0.5;
    pointer-events:none;
}​
</style>

http://jsfiddle.net/G5BeU/2/ How do I make this work in IE?

Answer 1

1) - The #map_canvas has a z-index value of 0 and the image .overlay-pollution has a z-index value of 100, the problem with this is that the image is actually located above the text so that's why IE doesn't allow selecting the text, to fix this give the #map_canvas higher value so say give #map_canvas - z-index: 101. This will fix the first issue.

2) - When you give the #map_canvas a higher value then the background color of #map_canvas will fill the block and the image won't appear so for that just give opacity to #map_canvas background color - background-color: rgb(229, 227, 223, 0.5);

Hopefully this should fix the IE issue.