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/。

我需要这些重叠，但也需要在radiobutton上发生事件。我可以通过在第二个div而不是display：inline-block上使用display：block来实现这一点，但是它们不会重叠。这在IE 10或IE 11兼容模式下不会发生。任何人都可以解释一下是什么

Answer 1

为什么不添加

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 2

首先让我解释为什么会发生这种情况，你有一个没有背景颜色的div，但它仍然是block元素。想象一下，你有一个士力棒，毫米，你被困在两层玻璃之间。

你可能会看到那个美味的士力架吧，但是你会遇到一些麻烦，将手伸过一个坚固的物体来获得它。

同样适用于input标记。它被困在2层之间，其中一层是它的父层。他们可能没有背景，但这并没有使其背景开放。

以下是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 3

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

enter image description here

在第一个示例中，我们看到输入元素本身在<{em>} 后面显示<{1}}元素，使得它们不能从红色元素的边框内访问。但是，它们会从红色元素后面窥视，使我们能够单击输入元素的上半部分。

对比度，底部示例显示将第二个元素从inline-block更改为inline-block的结果。在此示例中，输入元素在块级元素上方上方。这更像是IE10处理这个例子的方式，它出现了。

至于两者之间的区别，我并不完全确定。这可能是由原子内联级别的框引起的，这有助于其主机的内联格式化，以及在其自身内部进行内联格式化。块元素不会这样做。

解决方案

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

block

.box {
    position: relative;
}

.higher {
    z-index: 1;
}

这将导致类似以下内容：

enter image description here

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

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

IE 11阻止事件中的div重叠

3 个答案:

解决方案