html - 为什么 box-shadow 属性不应用于 <tr> 而是直接应用于 Edge 中的 <td> 元素？

Question

添加box-shadow时到 <tr> 、Firefox 和 Chrome 都在整行周围显示它，而 Edge 直接将其应用于每个 <td>最终看起来像网格而不是连续的行。

这是该行为的演示:

table tr {
  box-shadow: 0 0 0 1px red inset;
}

<table>
  <tr>
    <td>hello</td>
    <td>world</td>
  </tr>
</table>

以下是屏幕截图:

1. 它在 Firefox 中的外观

它在 Chrome 中的外观

它在 Edge 中的外观

所以看起来 Edge 直接将给定的样式应用于 <td> <tr>下的元素就像我设置了以下内容:

table td {
  box-shadow: 0 0 0 1px red inset;
}

<table>
  <tr>
    <td>hello</td>
    <td>world</td>
  </tr>
</table>

通过实验，看起来也像 display: block似乎解决了这个问题，它使所有浏览器(几乎)平等地显示阴影

table tr {
  box-shadow: 0 0 0 1px red inset;
  display: block;
}

<table>
  <tr>
    <td>hello</td>
    <td>world</td>
  </tr>
</table>

1. 如何 display: block在 Firefox 中查看

如何 display: block在 Chrome 中查看

如何 display: block在 Edge 中查看

Edge 确实显示 box-shadow关于<tr> Firefox 和 Chrome 的左侧和右侧也有类似的空白。

根据 box-shadow draft specifications它应该适用于所有元素。我感兴趣的是 Edge 为什么会这样做:为什么它会跳过 <tr>并将 CSS 直接应用到 <td>元素？这似乎完全不直观 - 其他属性如 border不要这样做 - 如果你将其应用于 parent ， children 不会全部得到 border ，也是。

Answer 1

适用于 <tr> 的有限 CSS 属性自从 CSS 首次出现以来，元素(以及其他带有“display:table-row”的元素)就一直是这样。规范中列出了更多适用于“所有元素”的 CSS3 属性，但显然 Edge 正在将其应用于单元格而不是行本身。