css - 使用垂直书写模式时 chrome 和 firefox 之间的区别

Question

在一个 div 中，我有 1 个 span 应该在水平文本的连续性中显示具有垂直书写模式的文本

问题是 chrome 在水平文本的末尾显示跨度，这就是我想要的，而当我为容器提供绝对位置时，firefox 在水平文本的开头和下方显示。

<div class="logo">Horizontal text<span class="vertical">Horizontal Text</span></div>

.logo {
    position: absolute;
}
.vertical {
     writing-mode: vertical-lr;
     transform:scale(-1, -1);
     display: inline-block;
     margin-left:-20px;
     padding-top:15px
 }

---

Answer 1

你的问题中没有足够的上下文来确定，但我怀疑问题是你的布局中有一个祖先元素，可能设置了类似 position: relative 的东西，这会影响你的绝对方式定位的 .logo 正在呈现。

我recreated your example in CodePen孤立地看，输出在 Chrome 76 和 Firefox 69 中看起来是一样的。

<div class="logo">Horizontal text<span class="vertical">Horizontal Text</span></div>

.logo {
    position: absolute;
}
.vertical {
    writing-mode: vertical-lr;
    transform:scale(-1, -1);
    display: inline-block;
    margin-left:-20px;
    padding-top:15px
}