页面右边缘的转换在浏览器之间的结果差异答案

【问题标题】：Difference in results between browsers for a transform at the right edge of the page页面右边缘的转换在浏览器之间的结果差异
【发布时间】：2020-09-10 21:55:51
【问题描述】：

在转换页面右边缘的文本时，我发现自己面临着不同之处。似乎 Chrome（左）和 Firefox（右）在正确的行为上存在分歧：

这是变换：

'style': {'transform': 'rotate(-90deg) translateY(-305%)','transformOrigin': 'right top', 'textAlign': 'left'}

element.style {
    transform: rotate(-90deg) translateY(-305%);
    left: 99.3471%;
    transform-origin: right top;
    text-align: left;
}
<style>
.rc-slider-mark-text-active {
    color: #666;
}
<style>
.rc-slider-mark-text {
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    color: #999;
}
<style>
.rc-slider * {
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
*, *::before, *::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

^其中一个元素表现不同。

对修复左侧行为有什么想法吗？提前谢谢。

【问题讨论】：

你能给我们一个完整的例子吗？父母有position: relative吗？
已编辑以添加有关 css 元素的更多详细信息。

标签： css css-transforms

【解决方案1】：

似乎调整宽度以适应内容解决了这个问题。

【讨论】：