0

我有两个div。一个 div（副本）的 css 溢出属性设置为 auto。另一个 div（覆盖）位于顶部。我无法更改这两个 div 的 z-index，因为从视觉上看，叠加层需要位于副本的顶部。在 IE9 中，“复制”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)

4

2 回答 2

0

这是因为您的 z-index 设置为#overlay位于副本的顶部，从而防止底层#copy接收鼠标事件。通过切换每个的 z-index，它工作得很好。

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

overflow:hidden;
overflow-y:scroll;

只是一个抬头。

于 2013-04-02T16:38:10.987 回答
0

pointer-events （CSS指针事件允许点击底层元素）在IE中不起作用..

我发现 ：

通过层转发鼠标事件/

和

http://jsbin.com/uhuto

于 2013-04-02T16:50:46.630 回答