使用 Edge 支持将文本旋转 90 度跨浏览器答案

【问题标题】：Rotate text 90 degrees cross browser with Edge support使用 Edge 支持将文本旋转 90 度跨浏览器
【发布时间】：2015-12-20 18:05:51
【问题描述】：

我有一个有趣的边缘案例（双关语），其中一些文本旋转了 90 度。

旋转变换适用于 Chrome 和 Firefox。
ms-writing-mode 修复了 Internet Explorer 的问题
在 Edge 中，文本都是从上到下书写，然后旋转 90 度 = 180 度

如何使以下工作跨浏览器？

.rotated
{
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    writing-mode: tb-rl;
    -ms-writing-mode: bt-rl;
}

编辑：这是截图和fiddle

【问题讨论】：

caniuse.com 说 Edge 支持 2d 变换 caniuse.com/#feat=transforms2d 您是否尝试添加不带前缀的 transform 和/或 -ms-transform ？目前尚不清楚您要对 writing-mode 做什么以及究竟是什么不起作用。也许每个浏览器的屏幕截图会有所帮助。
writing-mode 应该怎么做？
@feeela msdn.microsoft.com/en-us/library/ms531187(v=vs.85).aspx
不，不是它的用途，但你为什么要使用它？如果我停用它（使用 Chromium），我看不出任何区别。
@feeela 修复了IE8不支持transform的问题

标签： css microsoft-edge

【解决方案1】：

Transform 在 Edge 中效果很好。只是不要使用-webkit、-moz 和-o 供应商前缀。只需使用transform。

见小提琴codefoster/9jbeqs2g。

请注意，我将transform-origin 设置为bottom left，这样它就不会从屏幕上旋转并消失。

【讨论】：