Chrome 不支持 BUTTON 标签的“写作模式”？

Posted 2023-03-06

【中文标题】Chrome 不支持 BUTTON 标签的“写作模式”？

【英文标题】：Chrome does not support "writing-mode" for BUTTON tag?

【发布时间】：2017-09-02 20:08:52

【问题描述】：

我刚刚在 Chrome 中发现了一个可能的错误，但我找不到任何资源。

writing-mode 似乎没有在BUTTON 标签上运行。

详情请参阅living example。

<a href="#;" class="pippo">pippo</a>
<br><br>
<button class="pippo">pippo</button>

.pippo 
  writing-mode:vertical-lr

是否有任何解决方法可以在 Chrome 中修复它（在 Firefox 中正常运行）？

【参考方案1】：

你可以试试 SVG 文本元素。

more info

<svg  >
    <text x="28" y="150" transform="rotate(-90, 28, 150)" style="text-anchor:middle; font-size:12px">Its vertical now</text>
</svg>

【讨论】：

好吧，如果我必须从 BUTTON 更改为 SVG，我可以简单地更改为 A HREF，从而解决问题.... :-) 我的问题是关于启用写作的解决方法-按钮标签的模式，不完全改变标记

我的理解是写作模式旨在改变文本元素的布局和方向，当您将其应用于按钮等其他类时，文本不再是唯一被操纵的元素。所以也许它不应该完美地工作？

【参考方案2】：

你可以试试这个：

<button><p style="writing-mode:vertical-lr;">pippo</p></button>

【讨论】：

这可能是一个很好的解决方法，也可以使用简单的span

你是超级传奇！

【参考方案3】：

据我所知，“写作模式”似乎只在使用 Internet Explorer 时才有效？

当尝试添加 css 转换来修复它时，情况会变得更糟，因为 Internet Explorer 会同时应用这两者。

我需要为 Firefox 和 Chrome 使用特定的 CSS 规则，以便仅使用转换，而 IE 使用写作模式。

-webkit-transform:rotate(90deg);
-webkit-transform-origin: 255% 55% 0;
-moz-transform:rotate(90deg);
-moz-transform-origin: 255% 55% 0;
-ms-writing-mode: tb-rl;

https://css-tricks.com/forums/topic/css3-transform-only-in-firefox/

【讨论】：

是的，当然，其他浏览器需要供应商前缀，但在使用时它们可以正常运行...