Question

将transform:translate(0px, -45px)等CSS转换添加到表格行时，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应支持（无前缀）转换，并且基于标准，支持带有显示表行的元素。

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

Answer 1

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

Edge 但是，翻译表格单元格。这暂时可以暂时缓解。我将work up a few tests以确保我们准确地实现此功能。

Answer 2

是的，我面临同样的问题。你可以制作tr：block但是......这会破坏你的桌子。让我们希望微软能够快速处理这个问题。

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

2 个答案: