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

这是一个黑客：在内部div中添加一个类似“O”的CHAR，然后给它一个巨大的字体大小（取决于你想要跨越的区域）：

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

（我认为也设置为“溢出：隐藏”。）

IE喜欢在容器中有一些东西让点击影响。如果它只是完全为空，则会忽略点击。

小提琴：https://jsfiddle.net/cbnk8wrk/1/（在IE中观看！）

Answer 2

我对无序列表存在同样的问题，请参阅Getting unordered list in front of image slide-show in IE8, IE7 and probably IE6

解决方案：给div一个背景颜色，并用滤镜使其透明。

Answer 3

向div添加1x1 px透明背景gif也正常工作。

#divInner { background: url(/images/transparent.gif); }

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

3 个答案: