IE浏览器不支持table-row元素的box-shadow与transition问题求助

嘿，我来帮你搞定这两个问题～

一、先解决IE里的高亮失效问题 #

IE浏览器对display: table-row元素的CSS过渡（transition）和阴影（box-shadow）支持确实有坑，因为表格行是表格布局的核心组件，浏览器会优先按照表格规则渲染，很多非表格相关的CSS属性会被忽略。你不想改display属性破坏原有样式的话，有个完美的折中方案：

给table-row里的单元格（td/th）添加一个块级子元素，把transition和box-shadow都转移到这个子元素上。这样既保留了table-row的原有布局，又能让高亮效果在IE里正常生效。

举个示例代码：

<table>
  <tr class="highlight-row">
    <td>
      <div class="highlight-wrap">你的内容</div>
    </td>
    <td>
      <div class="highlight-wrap">另一列内容</div>
    </td>
  </tr>
</table>

/* 保留原table-row的布局样式 */
.highlight-row {
  /* 你的原有行样式 */
}

/* 块级子元素铺满单元格 */
.highlight-wrap {
  width: 100%;
  height: 100%;
  padding: inherit; /* 继承单元格的内边距，保证布局一致 */
  transition: transform .8s ease-in;
}

/* 鼠标hover时触发高亮 */
.highlight-row:hover .highlight-wrap {
  transform: scale(1.02); /* 你原来的变换效果 */
  box-shadow: 0 5px 10px 2px rgba(0, 0, 0, .2);
}

原理很简单：IE对块级元素的transition和box-shadow支持更稳定，把效果放到子元素上，完全不影响原表格的行布局逻辑。

二、display: table 和 display: table-row 的核心差异 #

这两个属性都是CSS表格布局的一部分，但定位和特性完全不同：

• display: table

  • 相当于HTML原生<table>标签的默认显示方式，是一个完整的表格容器。
  • 它是块级元素，会占据父元素的可用宽度，支持设置margin、border、padding（部分浏览器对table的padding处理特殊，建议用单元格的padding替代）。
  • 内部可以包含table-header-group（thead）、table-row-group（tbody）、table-row（tr）等子元素，浏览器会自动按照表格规则计算列宽、行高，支持边框合并（border-collapse）等表格特性。

• display: table-row

  • 相当于HTML原生<tr>标签的默认显示方式，是表格中的一行，必须作为display: table（或inline-table）元素的子元素（如果没有显式的table容器，浏览器会自动生成隐式的table容器）。
  • 它本身不能直接设置width、height：行宽由表格容器和单元格决定，行高由内部的table-cell（td/th）元素的高度决定。
  • 不支持设置margin（表格布局里行的margin会被忽略），而且很多CSS变换（比如transform）、装饰属性（比如box-shadow）在IE里支持有限，因为浏览器会优先按照表格布局规则渲染它。

内容的提问来源于stack exchange，提问作者Tyrone Norris