浏览器不自动翻转left/right因其属物理方向属性，与文本流向无关；应改用inset-inline-start/end等逻辑属性，并确保祖先节点direction和writing-mode连贯一致，辅以@supports渐进增强兼容性。
为什么left/right在RTL下不自动翻转
浏览器根本不会把left: 20px变成right: 20px，哪怕你写了dir="rtl"或direction: rtl。因为left和right是物理方向属性，只认容器的绝对左/右边缘，和文本流向无关。结果就是阿拉伯语页面里一个“右上角按钮”真跑到右边去了——而用户期望它出现在逻辑上的“内联起始侧”，也就是左边。
用inset-inline-start替代left/right
逻辑属性会根据direction和writing-mode自动映射：inset-inline-start在LTR时等于left，在RTL时等于right；inset-inline-end则相反。
- 错例：
position: absolute; top: 8px; right: 8px;→ RTL下仍贴右，实际应贴左 - 正例：
position: absolute; inset-block-start: 8px; inset-inline-end: 8px; - 伪元素也要改：
::before { inset-inline-start: 0; }，别再用left: 0
确保父容器声明了正确的writing-mode和direction
逻辑属性依赖祖先节点的书写上下文。如果父级没设direction: rtl或writing-mode: vertical-rl，浏览器就不知道“inline-start”在哪。
- 整页RTL：在
<html dir="rtl">或body { direction: rtl; }显式声明更稳妥 - 局部RTL：只给对应容器加
direction: rtl，子元素逻辑属性以此为基准 - 严禁混用：
dir="rtl"和direction: ltr同时存在会导致行为不可预测
兼容性差时必须渐进增强
inset在Safari 14.1+、Chrome 87+、Firefox 63+支持，但老版Safari（如iOS 14.4）不支持。不能只写逻辑属性就完事。
立即学习“前端免费学习笔记（深入）”；
- 回退写法：先写物理属性，再用
@supports覆盖 - 示例：
.badge { position: absolute; top: 4px; right: 4px; } @supports (inset-inline-start: 0) { .badge { inset-block-start: 4px; inset-inline-end: 4px; top: auto; right: auto; } } - JS控制时别硬编码：
el.style.insetInlineStart = '20px'优先；旧环境 fallback 到el.style[dir === 'rtl' ? 'right' : 'left'] = '20px'
direction和writing-mode必须连贯一致。哪怕中间某一层漏掉dir或被第三方库悄悄重置，inset-inline-start就会退化成无效值——这时候查Computed面板里的Containing block比反复调样式更直接。 
