IE11 не распознает z-индекс: -1

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, но не к этому случаю конкретно.
• Как я могу решить это? Я пробовал разные вещи, но ни одна из них не работала, не нарушая текущее поведение, которое заключается в том, чтобы тень от рамки была сверху.

Есть идеи?

Answer 1

Так как вы устанавливаете свойство 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 2

Известна ли проблема с IE11 и z-index: -1?

Вероятно, это не связано напрямую с z-index, но из-за того, что в CSS 2.1 указано, что

Влияние position:relative на группу строк таблицы, группу заголовков таблицы, группу нижнего колонтитула таблицы, строку таблицы, группу столбцов таблицы, столбец таблицы, ячейку таблицы и заголовок таблицы элементы не определены. (https://www.w3.org/TR/CSS2/visuren.html#propdef-position)

Это ограничение было снято с модулем позиционирования CSS 3 - но это не обязательно означает, что IE сохранил.

Если вы вложите дополнительный элемент в ячейки таблицы и примените к нему положение, z-индекс и фон, вы сможете получить это в основном работающим, https://jsfiddle.net/pjz43a52/10

Answer 3

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