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问题。

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

1 个答案: