无法将 div 定位在收音机 I.E 的顶部

Question

我有一个小应用程序禁用了需要升级才能启用的选项。当用户单击设置选项时，会显示一个 div，为他们提供升级说明。它在 Firefox 和 Chrome 中运行良好（尚未测试 Opera 或 Safari），但在 IE 中不起作用。 （任何版本）。

在我所做的测试中，似乎 javascript 可以正常工作，但如果您直接单击输入元素，则脚本不会运行。如果您单击元素外部（在本例中为单选按钮），则它可以工作。具有 hidden-input 类的 div 应该显示在顶部，但它似乎显示在它周围。我对 z-index 所做的一切似乎都不起作用，包括来自http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/ 的修复我猜其他人已经遇到过这个问题，但我不确定如何修复它。下面是html和javascript供参考。

<div style="display:inline-block; position:relative;">
    <input type="radio" class="radio" id="wcmenucart[cart_icon][1]" name="wcmenucart[cart_icon]" value="1" disabled="" />
    <div style="position:absolute; left:0; right:0; top:0; bottom:0;" class="hidden-input-icon">
    </div>
</div>
<span style="display:none;" class="pro-icon"><i> Available in the <a href="#">Pro Version</a></i></span>

Javascript - 似乎工作正常，但以防万一......

<script type="text/javascript">
    jQuery('.hidden-input-icon').click(function() {
        jQuery('.pro-icon').show('slow');
    });
</script>

CSS：

.hidden-input-icon 或 .pro-icon 都没有 css 样式。 .pro-icon div 包含 style="display:none;"，.hidden-input-icon div 包含 style="position:absolute; left:0; right:0; top:0; bottom:0;"

编辑：

我的代码 here. 有问题，希望这将有助于阐明这种情况。

Answer 1

我不认为您在这里遇到了z-index 问题。我相信您在通过禁用元素传播事件时遇到问题。 FF 和 Chrome 显然会将click 事件沿链传播到下一个元素，但 IE 不会。 This SO post 处理类似的问题，但使用的是 FF。他们的解决方案在 IE 中也失败了，但值得查看该帖子以查看更多详细信息。

Here is a solution 至少可以在 Chrome 和 IE 中运行。这是您使用此解决方案的小提琴updated。

代码与上面的解决方案非常相似，我只更改了第 17 行的“父”元素和第 39 行的实际点击功能。我还删除了原来的点击处理程序。我在小提琴中添加了另一个单选按钮，以便您可以看到我的解决方案不应干扰现有的“非禁用”元素。