为什么box-shadow属性不适用于< tr>但直接指向< td>Edge中的元素?

问题描述

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

When adding box-shadow to a <tr>, Firefox and Chrome both show it around the entire row, while Edge directly applies it to each <td> which ends up looking like grid rather than a continuous row.

这是行为的演示:

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

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

这是屏幕截图:

1. 在Firefox中的外观

1. 在Chrome浏览器中的外观

1. 在Edge中的外观

因此，似乎Edge会将给定样式直接应用于< tr> 下的< td> 元素，就好像我已经设置了以下内容:

So it seems like Edge is directly applying the given style to the <td> elements under the <tr> as if I've set the following:

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

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

通过实验，似乎也可以显示 display:block 来解决此问题，并使所有浏览器均(几乎)均匀地显示阴影

By experimenting, it also seems like display: block appears to fix this and it makes all browsers display the shadow (almost) equally

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

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

1. 显示方式:阻止在Firefox中的外观

1. How display: block looks in Firefox

1. 显示:阻止在Chrome中的外观

1. How display: block looks in Chrome

1. 显示方式:块在Edge中的外观

1. How display: block looks in Edge

Edge确实在< tr> 上显示 box-shadow ，并且Firefox和Chrome在左右两侧都有相似的空格.

Edge does display the box-shadow on the <tr> and Firefox and Chrome have a similar white-space on the left and right.

根据 box-shadow

According to the box-shadow draft specifications it's supposed to be applicable to all elements. I am interested in why Edge does what it does: why does it skip the <tr> and apply the CSS directly to <td> elements? It seems completely unintuitive - other properties like border don't behave this way - if you apply that to a parent, the children don't all get border, too.

推荐答案

适用于< tr> 元素(以及其他带有"display:table-row"元素的元素)的有限CSS属性一直是自CSS首次可用以来的所有方式.规范中列出了更多CSS3属性，这些属性适用于所有元素"，但显然Edge使其适用于单元格而不是行本身.

Limited CSS properties applying to <tr> elements (and other elements with "display:table-row") has been the way things are since CSS first became available. More CSS3 properties are listed in the specs as applying to "all elements," but apparently Edge is making that apply to the cells instead of the row itself.

这篇关于为什么box-shadow属性不适用于< tr>但直接指向< td>Edge中的元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！