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

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>

此屏幕截图显示了问题:第3行应位于第1行和第2行的顶部,但在IE/Edge中,它尚未移动.几乎任何其他现代浏览器都按预期运行.Microsoft指出IE 10+和Edge应支持(无前缀)转换,并且基于该标准,支持具有显示表行的元素.

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

Answer 1

如规范中所定义,transformable-elements包含其display属性计算到表行的元素.因此,您希望转换为在屏幕上重定位表行是正确的.Microsoft Edge似乎缺乏此支持.

但是,Edge 会转换表格单元格.这暂时可以暂时缓解.我将进行一些测试以确保我们准确地实现此功能.