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

Question

我有一个图像可能有一些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"被警告.
怎么解决这个问题？

Answer 1

这是一个hack:在内部div中添加一个类似"O"的CHAR,然后给它一个巨大的字体大小(取决于你想要跨越的区域):

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

(我认为也设置"溢出:隐藏".)

IE喜欢那里容器中的东西让点击影响.如果它完全是空的,它会忽略点击.

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