如何处理 safari ios 设备的 css 写入模式？

Question

我有一个 css 类，vertical-text其中这个 .vertical-text 将使文本处于垂直位置。一切都很好，但是当我尝试使用我的 iPhone 时，Safari 出现了。它不起作用。不知道是safari浏览器的问题还是ios更多的问题？

这是垂直文本类：

.vertical-text {
    transform: rotate(180deg);
    -ms-writing-mode: tb-lr;
    -webkit-writing-mode: tb-lr;
    -moz-writing-mode: tb-lr;
    writing-mode: tb-lr;

    -ms-writing-mode: vertical-lr;
    -webkit-writing-mode: vertical-lr;
    -moz-writing-mode: vertical-lr;
    writing-mode: vertical-lr;

    -ms-writing-mode: sideways-lr;
    -webkit-writing-mode: sideways-lr;
    -moz-writing-mode: sideways-lr;
    writing-mode: sideways-lr;
}

这是我的示例 html：

<td class="{{ $step['color'] }}-pure w-10-p text-white" rowspan="4">
    <label class="vertical-text text-center font-weight-bold">STEP {{ $step['id']}}</label>
</td>

这是 PC（谷歌浏览器）中的示例输出

Answer 1

如果您仍然需要答案，我刚刚发现如果您对表格单元格的内部内容使用转换，则单元格尺寸在 Safari iOS 中无法正确计算。一旦我删除了转换，写入模式就可以正常工作了。结果是您的步骤标签将朝外而不是朝内，但至少桌子不会爆炸。