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

Posted 2023-03-06

【中文标题】IE/Edge 未应用转换：转换为表格行

【英文标题】：IE/Edge not applying transform: translate to table row

【发布时间】：2016-04-15 13:54:27

【问题描述】：

向表格行添加 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 的元素。

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

【问题讨论】：

jsfiddle.net/dPixie/byB9d/3 的工作非常好

【参考方案1】：

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

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

【讨论】：

不幸的是，翻译单元格对我不起作用，因为我需要真正移动行才能实现拖放界面才能工作（在检查可能的拖放区重叠时）。此外，当表格行设置了背景颜色时，翻译单元格看起来很奇怪。

【参考方案2】：

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