私は2つの部門を持っています。1 つの div (コピー) には、auto に設定された css オーバーフロー プロパティがあります。もう 1 つの div (オーバーレイ) が一番上にあります。これら 2 つの div の z-index を変更することはできません。これは、視覚的にオーバーレイがコピーの上にある必要があるためです。IE9 では、「コピー」div のスクロールバーはクリック可能/使用可能ではありません。Chrome では、pointer-events プロパティを使用しているため、問題なく動作します。この例を 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) でのみ発生します