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

Question

我有一个css类的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上的示例输出(google chrome)

​

​

Answer 1

如果你仍然需要一个答案，我刚刚发现如果你在表格单元格的内部内容上使用transform，在Safari iOS中单元格的尺寸不能正确计算。一旦我删除了转换，写入模式就工作得很好。结果是您的步骤标签将面向外，而不是向内，但至少桌子不会爆炸。