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

Question

我的圖片在前面，文字在后面。 我想選擇后面的文字。 這適用於Chrome和Firefox。 我如何也可以在IE中使用它。

<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/如何在IE中進行這項工作？

Answer 1

1）-#map_canvas的z-index值為0，圖像.overlay-pollution的z-index值為100，問題是圖像實際上位於文本上方，因此IE不會這樣做。不允許選擇文本，要解決此問題，請給#map_canvas更高的值，例如說給#map_canvas-z-index：101。這將解決第一個問題。

2）-當您為#map_canvas賦予較高的值時，＃map_canvas的背景色將填充該塊，並且圖像不會顯示，因此僅給#map_canvas背景色以不透明度-background-color：rgb（229， 227、223、0.5）；

希望這可以解決IE問題。