свойство box-shadow не работает, если используется с переходом в IE и Edge

Question

Я не понимаю, почему свойство box-shadow не работает при использовании в сочетании с transition в IE и Edge. Однако эти свойства работают в любом другом браузере без каких-либо проблем. Но на самом деле не могу понять, в чем проблема только с IE и Edge.

Вот мой код в действии:

.tb_records {
  width:700px;
  margin:50px auto;
  border-collapse:collapse;
  text-align:center;
}

.tb_records th, .tb_records td {
  padding:15px;
  border-bottom:1px solid #dddddd;
}

.tb_records tr {
  -webkit-transition:box-shadow 0.5s linear;
  -o-transition:box-shadow 0.5s linear;
  -moz-transition:box-shadow 0.5s linear;
  transition:box-shadow 0.5s linear;
}

.tb_records tr:not(:first-child):hover {
  -webkit-box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.tb_records tr td:first-child {
  border-left:3px solid #FFFFFF;
  -webkit-transition:border-left 0.3s linear;
  -o-transition:border-left 0.3s linear;
  -moz-transition:border-left 0.3s linear;
  transition:border-left 0.3s linear;
}

.tb_records tr:hover td:first-child {
  border-left:3px solid #4285F4;
}

.tb_records tr td:last-child {
  border-right:3px solid #FFFFFF;
  -webkit-transition:border-right 0.3s linear;
  -o-transition:border-right 0.3s linear;
  -moz-transition:border-right 0.3s linear;
  transition:border-right 0.3s linear;
}

.tb_records tr:hover td:last-child {
  border-right:3px solid #4285F4;
}

<table class="tb_records">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Email</th> 
    <th>Phone</th>
  </tr>
  <tr>
    <td>Alan</td>
    <td>Bowers</td>
    <td>ban@gmail.com</td>
    <td>1234567890</td>
  </tr>
  <tr>
    <td>Ben</td>
    <td>Oliver</td>
    <td>ben@gmail.com</td>
    <td>1234567890</td>
  </tr>
  <tr>
    <td>Chris</td>
    <td>Armes</td>
    <td>chris@gmail.com</td>
    <td>1234567890</td>
  </tr>
  <tr>
    <td>Paul</td>
    <td>Black</td>
    <td>peb@yahoo.com</td>
    <td>1234567890</td>
  </tr>
  <tr>
    <td>Sagar</td>
    <td>Soni</td>
    <td>sag@yahoo.co.uk</td>
    <td>1234567890</td>
  </tr>
</table>

Answer 1

Добавьте -ms-box-shadow к коду. Это может работать Box-Shadow, кажется, поддерживается в IE11.

.tb_records {
  width:700px;
  margin:50px auto;
  border-collapse:collapse;
  text-align:center;
}

.tb_records th, .tb_records td {
  padding:15px;
  border-bottom:1px solid #dddddd;
}

.tb_records tr {
  -webkit-transition:box-shadow 0.5s linear;
  -o-transition:box-shadow 0.5s linear;
  -moz-transition:box-shadow 0.5s linear;
  -ms-transition:box-shadow 0.5s linear;
  transition:box-shadow 0.5s linear;
}

.tb_records tr:not(:first-child):hover {
  -webkit-box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -ms-box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.tb_records tr td:first-child {
  border-left:3px solid #FFFFFF;
  -webkit-transition:border-left 0.3s linear;
  -o-transition:border-left 0.3s linear;
  -moz-transition:border-left 0.3s linear;
  transition:border-left 0.3s linear;
}

.tb_records tr:hover td:first-child {
  border-left:3px solid #4285F4;
}

.tb_records tr td:last-child {
  border-right:3px solid #FFFFFF;
  -webkit-transition:border-right 0.3s linear;
  -o-transition:border-right 0.3s linear;
  -moz-transition:border-right 0.3s linear;
  transition:border-right 0.3s linear;
}

.tb_records tr:hover td:last-child {
  border-right:3px solid #4285F4;
}

<table class="tb_records">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Email</th> 
    <th>Phone</th>
  </tr>
  <tr>
    <td>Alan</td>
    <td>Bowers</td>
    <td>ban@gmail.com</td>
    <td>1234567890</td>
  </tr>
  <tr>
    <td>Ben</td>
    <td>Oliver</td>
    <td>ben@gmail.com</td>
    <td>1234567890</td>
  </tr>
  <tr>
    <td>Chris</td>
    <td>Armes</td>
    <td>chris@gmail.com</td>
    <td>1234567890</td>
  </tr>
  <tr>
    <td>Paul</td>
    <td>Black</td>
    <td>peb@yahoo.com</td>
    <td>1234567890</td>
  </tr>
  <tr>
    <td>Sagar</td>
    <td>Soni</td>
    <td>sag@yahoo.co.uk</td>
    <td>1234567890</td>
  </tr>
</table>