Question

我有一个表格，当将鼠标悬停在行上以显示某些样式时，该表格将使用阴影框。直到我在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的顶部。

有什么想法吗？

Answer 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>

Answer 2

由于设置了Z-Index属性，因此在使用F12开发人员工具（使用IE 11）选择元素时，只能选择表元素，而不是tr，因此不会触发悬停。行动。截图如下：

要解决此问题，您可以添加以下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>

结果：

Answer 3

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

这可能与z-index没有直接关系，但是由于CSS 2.1对此进行了规定，

position:relative对表行组，表头组，表脚组，表行，表列组，表列，表单元格和表的影响-caption元素未定义。（https://www.w3.org/TR/CSS2/visuren.html#propdef-position）

CSS 3定位模块已取消了此限制-但这不一定意味着IE保持了进度。

如果您将其他元素嵌套到表格单元格中并对其应用位置，z-index和背景，则应该能够使它基本起作用，https://jsfiddle.net/pjz43a52/10

IE11无法识别z-index：-1

3 个答案: