IE/Edge 未应用转换：转换为表格行

Question

向表格行添加 CSS 转换（如 transform:translate(0px, -45px)）时，Internet Explorer（测试 10 和 11）和 Microsoft Edge 无法正确显示转换。

以一些简单的代码为例：

<table style="width:500px;">
    <tbody>
        <tr style="height: 30px; background-color:red; color:white;">
            <td>1</td>
        </tr>
        <tr style="height: 30px; background-color:blue; color:white;">
            <td>2</td>
        </tr>
        <tr style="height: 30px; background-color:yellow; color:black; transform:translate(0, -45px);">
            <td>3</td>
        </tr>
    </tbody>
</table>

This screenshot 显示问题：第 3 行应该位于第 1 行和第 2 行之上，但在 IE/Edge 中，它没有移动。几乎任何其他现代浏览器的行为都符合预期。 Microsoft 指出 IE 10+ 和 Edge 应该支持（无前缀）转换，并且基于标准，支持显示 table-row 的元素。

有人知道为什么这不起作用吗？

Answer 1

作为defined in the spec，transformable-elements 包括其display 属性计算为table-row 的元素。因此，您期望 transform 在屏幕上重新定位表格行是正确的。 Microsoft Edge 似乎缺乏这种支持。

Edge确实，然而，翻译表格单元格。这可能会暂时提供暂时的缓解。我要去work up a few tests 确保我们准确地实现了这个功能。

Answer 2

是的，我也面临同样的问题。你可以让 tr display:block 但是......这会破坏你的桌子。让我们希望微软能尽快解决这个问题。