逻辑属性需方向上下文（dir/direction）才能生效；必须替换的方向敏感节点包括margin-inline-start、padding-inline-start、text-align: start、inline-size/block-size及inset-inline-start/end；降级需@supports手动控制并双写物理属性。
直接用 margin-inline、padding-block 和 text-align: start 就能自动适配 LTR/RTL，不用写两套 CSS；但前提是必须设 dir="rtl" 或 direction: rtl，否则逻辑属性就按默认 LTR 解析——这不是语法问题，而是方向上下文缺失。
哪些地方必须换，哪些可以先不动
重点不是“全量替换”，而是锁定方向敏感节点。以下位置不换就会出错：
-
margin-inline-start用于按钮组、图标、表单控件之间的水平间距（如工具栏按钮间margin-inline-end: 4px） -
padding-inline-start用于contenteditable容器或输入框，确保光标首次进入时停在视觉起点（LTR 是左，RTL 是右） -
text-align: start必须用于段落级文本，它影响换行、首行缩进和对齐逻辑；text-align: left在 RTL 下会强制左对齐，破坏阅读流 -
inline-size和block-size要成对替换width/height，尤其在writing-mode: vertical-rl场景下，混用会导致布局崩塌 - 绝对定位的
left/right必须换成inset-inline-start/inset-inline-end，否则不会随dir自动镜像
为什么写了 margin-inline 却没生效
常见原因不是语法写错，而是方向上下文没建立：
- 根元素没设
dir="rtl"——lang属性不能替代dir，浏览器只靠dir或direction决定逻辑映射 - 嵌入的 LTR 片段（如 URL、代码块）没用
<bdo dir="ltr">显式包裹，双向算法失效，导致周围逻辑属性计算异常 - JS 动态插入内容后未同步设置
dir，margin-inline-end等属性不会重生效，需触发重排（例如改style.opacity或强制offsetHeight） - Safari ≤15.6 对
border-inline静默忽略，box-sizing: border-box下尺寸会不准，得加@supports降级
怎么安全降级兼容旧浏览器
别依赖 PostCSS 自动补全，手动控制更可靠：
立即学习“前端免费学习笔记（深入）”；
- 用
@supports包裹逻辑写法，外层写物理 fallback：@supports (margin-inline: 1em) { .btn { margin-inline: 8px; } } @supports not (margin-inline: 1em) { .btn { margin-left: 8px; margin-right: 8px; } } - Safari ≤15.3 不支持
padding-block的重排，建议双写：padding-block: 10px; padding-top: 10px; padding-bottom: 10px; -
margin-inline: 8px 12px在 Safari ≤15.3 中完全无效，必须拆成margin-inline-start: 8px; margin-inline-end: 12px; - 编辑器类场景中，
inset-inline-start降级需 JS 分支判断：el.style.insetInlineStart = '20px';后备为el.style.left = dir === 'rtl' ? 'auto' : '20px'; el.style.right = dir === 'rtl' ? '20px' : 'auto';
真正麻烦的不是写错一个 padding-inline，而是写了十个 margin-left 后，发现只要改 dir 就全得重测——逻辑属性的价值不在语法新潮，而在把方向耦合从样式层彻底抽离。
