框影出现在IE中的所有列中。

Question

我把box-shadow交给tr在table中--它在所有浏览器中都能正常工作，但在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>

​