IE/Edge 未应用转换：转换为 table 行

Question

将 transform:translate(0px, -45px) 之类的 CSS 转换添加到 table 行时，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 shows the problem: row 3 should be positioned on top of rows 1 and 2, but in IE/Edge, it hasn't moved. Almost any other modern browser behaves as expected. Microsoft 指出 IE 10+ 和 Edge 应该支持（无前缀）转换，并且根据标准，支持显示 table 行的元素。

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

Answer 1

因为 defined in the spec，transformable-elements 包括 display 属性计算为 [=28 的元素=]。因此，您期望 transform 重新定位屏幕上的 table 行是正确的。 Microsoft Edge 似乎缺少此支持。

边缘，但是，翻译 table 个单元格。这可能暂时提供暂时的缓解。我将 work up a few tests 确保我们准确地实现了此功能。

Answer 2

是的，我遇到了同样的问题。您可以创建 tr display:block 但是...这会破坏您的 table。希望微软能尽快解决这个问题。

IE/Edge 未应用转换：转换为 table 行

IE/Edge not applying transform: translate to table row

css

internet-explorer

css-transforms

microsoft-edge