javascript - 单击放置在IE中图像上方的div

我有一幅图像，上面可能有一些div(指定该图像中的某些选择)。这些div应该是可点击的。像这样的东西:

#divOuter { width: 500px; height: 500px; border: 2px solid #0000FF; position: relative; }
#divInner { width: 100px; height: 100px; border: 2px solid #00FF00; position: absolute; cursor: pointer;  top: 20px; left: 20px; }

<div id="divOuter">
    <img src="SomeImage.jpg" />
    <div id="divInner"></div>
</div>

$("#divOuter").click(function() { alert("divOuter"); });
$("#divInner").click(function() { alert("divInner"); });

在chrome和FF中，它按预期方式工作(指针显示在div上，单击它会提示“divInner”，然后提示“divOuter”)。
但是，在IE8中却没有-仅当悬停/单击内部div边框时，我才得到相同的行为。在该div中单击时，仅会提示“divOuter”。
如何解决？

最佳答案

这是一个技巧:在内部div中添加一个像“O”这样的CHAR，然后为其赋予巨大的字体大小(取决于您要覆盖的区域):

#divInner { /* ... */; font-size: 1000px; color: transparent; }

(我认为还应设置“溢出:隐藏”。)

IE喜欢在容器中放一些东西来影响点击。如果它完全是空的，它将忽略点击。

fiddle :https://jsfiddle.net/cbnk8wrk/1/(在IE中观看!)