3

当我在 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 兼容模式下不会发生。谁能解释一下怎么回事

4

3 回答 3

3

首先让我解释一下为什么会这样，你有一个没有背景颜色的 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。

于 2013-11-14T21:47:17.047 回答
3

你为什么不添加

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。

于 2014-01-17T14:22:42.020 回答
0

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/

于 2013-11-16T21:16:38.100 回答