如何使用 css 编写模式处理 safari ios 设备？

Posted 2023-02-24

【中文标题】如何使用 css 编写模式处理 safari ios 设备？

【英文标题】：How to deal in safari ios devices with css writing-mode?

【发布时间】：2020-06-15 00:38:12

【问题描述】：

我有一个 vertical-text 的 css 类，其中这个 .vertical-text 将使文本处于垂直位置。一切都很好，但是当我在我的 iPhone 上尝试时，野生动物园。它不工作。不知道是 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 中的示例输出（谷歌浏览器）

【问题讨论】：

请起床

【参考方案1】：

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