html - Chrome - 固定位置

Question

我在屏幕的右侧添加了一个选项卡，但在 Chrome 中查看页面时，它大部分都偏移到了屏幕之外。然而在 Firefox 和其他浏览器中，它似乎完全设置在右侧。

两种浏览器的截图:

火狐: Chrome :

还有一个 JS Fiddle 显示:https://jsfiddle.net/gcu6d7qL/1/

我的 HTML 是:

<a href="#" data-toggle="modal" data-target="#property-alert-modal" id="property-alert-cta" class="property-alert-cta -right u-rounded-4">
    <div>
        <span class="text-uppercase f-bold c-white f-13">Sign up for <span class="f-normal">Property Alerts</span></span>
    </div>
</a>

CSS:

.property-alert-cta.-right {
    right: 0;
}
.u-rounded-4 {
    border-radius: 4px;
}
.property-alert-cta {
    z-index: 2;
    position: fixed;
    top: 30%;
    background: #5b00ff;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 1px;
    padding: 1.5em 0.8em;
}

有人对此有任何修复或建议吗？

谢谢

Answer 1

-webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;

将这些 CSS 代码行替换为以下代码。

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