html - Box-shadow 出现在 IE 的所有列中

Question

我在 table 中将 box-shadow 赋予 tr 它在所有浏览器中都工作正常，但在 IE- 10 它在所有 td 中显示 box-shadow，为什么？

tr {
  box-shadow: 2px 0 0px #888 inset;
}

<table border=0 cellsapcing=0 cellpadding=6>
  <tr>
    <th>Column</th>
    <th>Column</th>
    <th>Column</th>
    <th>Column</th>
  </tr>
  <tr>
    <td>Column</td>
    <td>Column</td>
    <td>Column</td>
    <td>Column</td>
  </tr>
</table>

Chrome

IE 10

注意:我不能使用border，所以我给了box-shadow

Answer 1

我会采取一些不同的方法，并将框阴影分配给第一个 th 和 td 元素。这个解决方案绕过问题，而不是解决它——但我觉得它同样有效。

tr th:first-child, tr td:first-child {
  box-shadow: 2px 0 0px #888 inset;
}

<table border=0 cellsapcing=0 cellpadding=6>
  <tr>
    <th>Column</th>
    <th>Column</th>
    <th>Column</th>
    <th>Column</th>
  </tr>
  <tr>
    <td>Column</td>
    <td>Column</td>
    <td>Column</td>
    <td>Column</td>
  </tr>
</table>