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

【问题标题】：Clicking on a div placed over an image in IE在 IE 中单击放置在图像上的 div
【发布时间】：2015-04-01 17:22:00
【问题描述】：

我有一张图片，上面可能有一些 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”被提醒。
如何解决这个问题？

【问题讨论】：

尝试提供图像宽度/高度信息，您可能需要#divInner 中的跨度和大小。我自己最近也遇到过这个问题。
尝试为您的divs 添加背景颜色，看看是否可以让它们可点击，或显示它们的放置位置。
听起来您正在尝试重新创建所谓的“图像映射”。 webstartcenter.com/howto/imgmap.php
@David - 为内部 div 添加背景颜色确实有效，但我更喜欢避免这种情况。 @GolezTrol - 不完全是，我需要一些更有活力的东西。

标签： javascript html css

【解决方案1】：

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

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

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

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

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

【讨论】：

这确实解决了这个问题，因为问题是 IE 需要在 DIV 中设置一些内容大小，将跨度设置为包含 DIV 的大小就不太麻烦了。 ;-)
问题是你不能真正给<span> 任何高度，因为它是一个内联元素。因此，您仍然需要用一些东西来填充范围。
或者使用 div 代替 span。您可以通过将 display:block 样式分配给跨度来为跨度指定高度。使其本质上表现得像一个 div。
@GolezTroi 好吧，他已经得到 <div>！问题是里面必须有 something，某种 IE 认为可以点击的“内容”。另一个空的<div> 内部不会解决这个问题。

【解决方案2】：

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

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

【讨论】：

如果“背景颜色”为“透明”，则此方法不起作用。
@Pointy 检查我的问题的答案，使用正常的背景颜色和 IE 过滤器。
我必须为@philrabin 解决方案设置一个极小的透明度：背景：rgba(0,0,0,.01)

【解决方案3】：

向 div 添加 1x1 px 透明背景 gif 也可以。

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

【讨论】：