Question

我有两个div。一个div（副本）将css溢出属性设置为auto。另一个div（叠加）位于顶部。我无法更改这两个div的z-index，因为在视觉上叠加需要位于副本之上。在IE9中，'copy'div的滚动条不可点击/可用。在Chrome中，它工作正常，因为我使用的是指针事件属性。如何让这个例子在IE9中工作？我需要能够滚动内容。

CSS

#overlay{
    width:400px;
    height:200px;
    position:absolute;
    display:block;
    background-color:#990000;
    z-index:2;
    opacity:.2;
    pointer-events:none;
}
#copy{
    overflow:auto;
    width:300px;
    height:200px;
    position:absolute;
    overflow-y: scroll;
    overflow-x: hidden;
    z-index:1;

}

HTML

<div id="overlay"></div>
<div id="copy">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in felis elit. Mauris elementum mi non mauris euismod interdum. Morbi auctor velit lacinia augue vehicula vel egestas tortor scelerisque. Sed quis arcu massa, quis elementum ligula. Nunc et quam id ipsum consequat ullamcorper.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in felis elit. Mauris elementum mi non mauris euismod interdum. Morbi auctor velit lacinia augue vehicula vel egestas tortor scelerisque. Sed quis arcu massa, quis elementum ligula. Nunc et quam id ipsum consequat ullamcorper.</div>

在此处查看示例： http://jsfiddle.net/7w4Jh/1/

请记住，该示例在webkit浏览器中运行良好。该问题仅发生在Internet Explorer（9）

中

Answer 1

这是因为你的z-index被设置为#overlay坐在副本的顶部，防止底层#copy接收鼠标事件。通过切换每个的z-index，它可以正常工作。

此外，您不需要声明所有三个overflow属性。这就足够了：

overflow:hidden;
overflow-y:scroll;

只是抬头。

Answer 2

pointer-events（CSS pointer-Events To Allow Clicks On Underlying Elements）无法在IE中使用..

我发现：

forwarding-mouse-events-through-layers/

和

http://jsbin.com/uhuto

IE滚动条+溢出滚动+ div顶部

2 个答案: