IE 11 阻止事件中的 div 重叠

Question

当我在 IE 11 中有重叠的 div 时，第一个带有单选按钮的 div 会被第二个重叠的 div 阻止接收任何鼠标事件，所以我无法单击单选按钮！请参阅我正在使用的代码的简化示例：

<div>
<div style="display: block; border: solid 1px blue;">
    <table>
        <tr>
            <td><input id="rbl_0" type="radio" checked="checked"><label for="rbl_0">Option 1</label></td>
            <td><input id="rbl_1" type="radio"><label for="rbl_1">Option 2</label></td>
         </tr>
    </table>
</div>

<div style="margin-top: -23px; display: inline-block; border: solid 1px red;">                  
    <table style="width: 100%; table-layout: fixed;">
        <tr><td>&nbsp;</td></tr>
        <tr><td>Product 1</td></tr>
        <tr><td>Product 2</td></tr>
    </table>
</div></div>

在 JSFiddle 中：http://jsfiddle.net/yW6kp/1/。

我需要这些重叠，但也需要单选按钮上的事件发生。我可以通过在第二个 div 上使用 display: block 而不是 display: inline-block 来实现这一点，但是它们不会重叠。这在 IE 10 或 IE 11 兼容模式下不会发生。谁能解释一下怎么回事

Answer 1

首先让我解释一下为什么会这样，你有一个没有背景颜色的 div，但它仍然是一个 block 元素。想象一下，你有一个士力架，嗯，你把它夹在两层玻璃之间。

你可能会看到那个美味的士力架，但你很难把手伸进一个固体物体来拿到它。

input 标签也是如此。它被困在两层之间，其中一层是它的父级。他们可能没有背景，但这不会使其背景开放。

这是 html 的外观，

<div>
<div style="display: block; border: solid 1px blue;height: 35px;">

</div>

<div style="margin-top: -25px; display: inline-block; border: solid 1px red;">
    <table>
        <tr>
            <td><input id="rbl_0" type="radio" checked="checked" /><label for="rbl_0">Option 1</label></td>
            <td><input id="rbl_1" type="radio" /><label for="rbl_1">Option 2</label></td>
         </tr>
    </table>
    <table style="width: 100%; table-layout: fixed;">
        <tr><td>&nbsp;</td></tr>
        <tr><td>Product 1</td></tr>
        <tr><td>Product 2</td></tr>
    </table>
</div>

这是一个 jsfiddle，看看它是如何工作的，fiddle。

Answer 2

你为什么不直接添加

pointer-events:none;

到你的第二个 div？喜欢（使用你的代码）

<div>
<div style="display: block; border: solid 1px blue;">
    <table>
        <tr>
            <td><input id="rbl_0" type="radio" checked="checked"><label for="rbl_0">Option 1</label></td>
            <td><input id="rbl_1" type="radio"><label for="rbl_1">Option 2</label></td>
         </tr>
    </table>
</div>

<div style="margin-top: -23px; display: inline-block; pointer-events:none; border: solid 1px red;">                 
    <table style="width: 100%; table-layout: fixed;">
        <tr><td>&nbsp;</td></tr>
        <tr><td>Product 1</td></tr>
        <tr><td>Product 2</td></tr>
    </table>
</div>

使用它，您可以整天点击另一个 div。

Answer 3

Internet Explorer 11 处理此问题的方式似乎与 Firefox 和 Chrome 处理它的方式相同。我稍微修改了您的代码以说明正在发生的事情，以及为什么当您的 inline-block 元素向上移动到其相邻的输入字段上方时您无法单击单选按钮。

在第一个示例中，我们看到输入元素本身出现在inline-block 元素的后面，使得从红色元素的边界内无法访问它们。但是，它们确实从红色元素后面窥视，使我们能够单击输入元素的上半部分。

相比之下，底部示例显示了将第二个元素从 inline-block 更改为 block 的结果。在这个例子中，输入元素出现在块级元素的上方。这似乎更类似于 IE10 处理示例的方式。

至于两者之间的区别是什么，我不完全确定。这可能是由原子内联级框引起的，它们有助于其主机的内联格式，以及它们内部的内联格式。块元素不这样做。

解决方案

解决此问题的方法是避免表单与其他元素重叠，这通常是一种不好的做法。或者，您可以为两个容器提供相对定位，并为托管我们表单的容器提供更高的 z-index。这会将元素及其所有内容提升到红框上方。

.box {
    position: relative;
}

.higher {
    z-index: 1;
}

<div class="box higher"><!-- inputs --></div>
<div class="box"><!-- text --></div>

这将导致如下所示：

我已在修改后的小提琴中提供了这些更改，非常欢迎您探索。如果有任何方法可以帮助我进一步探索这个问题，请告诉我。

小提琴：http://jsfiddle.net/yW6kp/11/show/