【问题标题】:Chrome does not support "writing-mode" for BUTTON tag?Chrome 不支持 BUTTON 标签的“写作模式”?
【发布时间】: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 中正常运行)?

【问题讨论】:

    标签: css google-chrome


    【解决方案1】:

    你可以试试 SVG 文本元素。

    more info

    <svg width="100" height="600">
        <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/

    【讨论】:

    • 是的,当然,其他浏览器需要供应商前缀,但在使用时它们可以正常运行...
    猜你喜欢
    • 2020-12-09
    • 2020-10-26
    • 2010-12-23
    • 2021-12-05
    • 2021-01-26
    • 1970-01-01
    • 1970-01-01
    • 2023-04-01
    • 1970-01-01
    相关资源
    最近更新 更多