在IE中，box-shadow出现在所有列中

Question

我在一个表格中的元素上使用了box-shadow，在所有浏览器中都能正常工作，但在IE-10中，它会在所有元素中显示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盒阴影

- Abhishek Pandey

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>

- Tom

---

实际上，在我的项目中，这种方法需要更多的定制，所以我将考虑这个选项作为最后一个选项。 - Abhishek Pandey

将样式分配给物理<tr>元素总是存在风险的，因为浏览器处理它们的方式最多是不一致的。我真的建议尽可能避免在表行上使用样式，以使您的生活更轻松。 - Tom

好的！我会按照你的选项去做，但我仍然想知道为什么会发生这种情况，谢谢让我的生活变得更轻松 :p :D。 - Abhishek Pandey