left/right等物理属性在RTL布局中不会自动镜像，必须改用inset-inline-start等逻辑属性实现自动适配；JavaScript中应优先使用insetInlineStart而非left/right，兼容旧版需根据dir属性分支赋值。
left/right 值在 RTL 布局中不会自动镜像
浏览器不会把 left: 20px 自动变成 right: 20px，哪怕你设置了 dir="rtl" 或 direction: rtl。这是最常被误以为“会自动处理”的地方。
原因很简单：CSS 的 left 和 right 是绝对方向属性，和书写方向（writing direction）无关；它们始终相对于容器的左/右边缘计算。
- 只有
margin-left、padding-left、text-align这类逻辑属性（logical properties）才会随dir或direction变化而切换含义 - 传统物理属性（
left/right/top/bottom）在 RTL 下照旧生效，不翻转 - 如果强行用
left做定位，在阿拉伯语或希伯来语界面里，元素可能跑到屏幕外或遮挡内容
用 inset / margin-inline 替代 left/right 实现自动镜像
要让定位值随语言方向自动适配，必须改用逻辑属性。现代 CSS 提供了两套方案：
-
inset是top/right/bottom/left的逻辑别名，支持inset-inline-start（对应 LTR 的left，RTL 的right） -
margin-inline-start、padding-inline-start等也同理，比手动写dir切换更可靠 - 注意兼容性：
inset在 Safari 14.1+、Chrome 87+、Firefox 63+ 支持；老版本需回退到margin-inline-start
示例：
.panel {
position: absolute;
inset-inline-start: 16px; /* LTR → left, RTL → right */
top: 8px;
}
JavaScript 动态读取 dir 属性时别硬编码 left/right
如果必须用 JS 控制定位（比如拖拽、弹窗对齐），不要通过 element.style.left = '20px' 写死物理方向。
立即学习“前端免费学习笔记（深入）”；
- 优先用
element.style.insetInlineStart = '20px'—— 浏览器自动处理镜像 - 若需兼容旧环境，可读取
document.documentElement.dir，再分支赋值：el.style[dir === 'rtl' ? 'right' : 'left'] = '20px' - 避免用
getComputedStyle(el).left判断位置：它返回的是计算后物理值（如"20px"），无法反映逻辑意图，且在 RTL 下可能误导
伪元素 ::before/::after 的定位也要逻辑化
很多 UI 组件（如 Tooltip 箭头、下拉菜单小三角）依赖 ::after + left 定位，一换 RTL 就错位。
- 把
left: 50%改成inset-inline-start: 50% - 箭头方向本身也要镜像：用
transform: scaleX(-1)或重写border侧边（如border-left-color: transparent→border-right-color: transparent） - 特别注意：
transform: translateX()不会自动镜像，translateX(-10px)在 RTL 下仍是向左移，不是“向起始边”移
复杂点在于：逻辑属性和物理属性混用时，镜像行为不可预测。只要用了 left 或 right，就得全程自己兜底；一旦选了逻辑路径，就别中途切回去。
