IE11 无法识别 z-index：-1答案

【问题标题】：IE11 not recognizing z-index: -1IE11 无法识别 z-index：-1
【发布时间】：2018-11-10 02:37:22
【问题描述】：

我有一个表格，它在悬停在行上时使用 box-shadow 来显示一些样式。这工作正常，直到我发现在 IE11 中它不起作用。

问题似乎是使用 z-index: -1 来避免 td 高于 tr 在 IE11 中无法正常工作。

table td {
  position:relative;
  background-color: #EFEFEF;
  z-index: -1;
}

我创建了一个适用于 chrome 但不适用于 IE11 的小提琴：https://jsfiddle.net/pjz43a52/8/

所以我的问题是：

IE11 和 z-index:-1 是否存在任何已知问题？我发现了与 z-index 相关的内容，但与本案例无关。
我该如何解决这个问题？我尝试了不同的方法，但它们都无法在不破坏当前行为的情况下工作，即在 td 顶部放置 box-shadow。

有什么想法吗？

【问题讨论】：

标签： css internet-explorer-11 z-index box-shadow

【解决方案1】：

<table> 是癌症...

虽然我不知道为什么会发生这种行为......但是是的 - 这是兼容性问题，我们必须解决它，所以如果我们重新使用您之前编写的相同代码，而不是使用<table> 我们将只使用<div>，结果将是相同的，但它可以在 IE11 上运行 - 我已经为你测试过！

.container {
  background-color: #fafafa;
  z-index: 0;
}

.table {
  position: relative;
  width: 100px;
  z-index: 1;
  border-spacing: 0px;
  border-bottom: 1px solid black;
}
.table .col {
  position:relative;
  background-color: #EFEFEF;
  z-index: -1;
  border-top: 1px solid black;
  border-right:  1px solid black;
  border-left:  1px solid black;
}
.table .row:hover {
  position: relative;
  box-shadow: 
    inset 5px 0 0 #dadce0, 
    inset -3px 0 0 #dadce0, 
    0 5px 2px 0 rgba(60,64,67,.3), 
    0 5px 3px 1px rgba(60,64,67,.15);
}

<div class="container">
  <div class="table">
    <div class="row">
      <div class="col">Some Value</div>
    </div>
    <div class="row">
      <div class="col">Some Value</div>
    </div>
    <div class="row">
      <div class="col">Some Value</div>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

由于设置的是Z-Index属性，所以当你使用F12开发者工具（使用IE 11）选择元素时，只能选择表格元素，不能选择tr，所以不会触发hover行动。截图如下：

要解决这个问题，您可以添加以下 CSS 样式：

table tr{
    display:block;                    
}

然后，当使用 F12 开发者工具选择元素时，我们可以选择表格行。因此，它将触发悬停动作。

测试样本如下：

<style type="text/css">

    table {
        position: relative;
        z-index: 1;
        border-spacing: 0px;
        border-bottom: 1px solid black;
    }

        table td {
            border-top: 1px solid black;
            border-right: 1px solid black;
            border-left: 1px solid black;
        }
        table tr{
            display:block;
        }

    .container {
        background-color: #fafafa;
        z-index: 0;
    }

    table td {
        position: relative;
        background-color: #EFEFEF;
        z-index: -1;
    }

    table tr:hover {
        position: relative;
        box-shadow: inset 5px 0 0 #dadce0, inset -3px 0 0 #dadce0, 0 5px 2px 0 rgba(60,64,67,.3), 0 5px 3px 1px rgba(60,64,67,.15);
    }
</style>
<div class="container">
    <table>
        <tbody>
            <tr>
                <td>Some Value</td>
            </tr>
            <tr>
                <td>Some Value</td>
            </tr>
            <tr>
                <td>Some Value</td>
            </tr>
        </tbody>
    </table>
</div>

结果：

【讨论】：

【解决方案3】：

IE11 和 z-index: -1 是否存在任何已知问题？

这可能与 z-index 没有直接关系，但由于 CSS 2.1 指定了这一点，

position:relative 对 table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-column、table-cell 和 table-caption 的影响元素未定义。 (https://www.w3.org/TR/CSS2/visuren.html#propdef-position)

CSS 3 定位模块已经解除了这个限制 - 但这并不一定意味着 IE 已经跟上。

如果你在表格单元格中嵌套一个额外的元素，并对其应用位置、z-index 和背景，你应该能够让这个基本工作，https://jsfiddle.net/pjz43a52/10

【讨论】：