直接用margin-inline-start替换margin-left不能开箱即用，必须配合direction/dir上下文及物理fallback：未设方向时它等价margin-left，旧浏览器（ie11、safari≤14等）会静默丢弃整条声明，需先写margin-left/margin-right再覆盖逻辑属性。
直接用逻辑属性（如 margin-inline-start）替换物理属性（如 margin-left）不能“开箱即用”，必须配合方向上下文和兼容性兜底策略，否则旧浏览器会静默丢弃、RTL 下完全失效。
必须先确保方向上下文生效
逻辑属性不依赖浏览器默认方向，而是由 dir 属性或 direction/writing-mode CSS 规则决定映射关系。没设置方向，margin-inline-start 就等价于 margin-left，不会翻转。
- HTML 根节点加
dir="ltr"或dir="rtl"，子元素自动继承 - 若用 CSS 控制方向，写
html { direction: rtl; }或body { writing-mode: vertical-rl; } - React/Vue 等框架中，
dir可能被剥离，需显式透传或用data-dir+ 属性选择器模拟
旧浏览器必须显式提供物理 fallback
IE11、Edge 17 及更早、Android WebView 4.4、Safari ≤14 完全不识别逻辑属性，且不支持 @supports (margin-inline: 0) 检测——整条规则被跳过，控制台无提示。
- 正确顺序：先写物理属性，再写逻辑属性，例如
margin-left: 1rem;<br>margin-right: 1rem;<br>margin-inline-start: 1rem;<br>margin-inline-end: 1rem;
- 避免简写形式：
margin-inline: 1rem或margin-inline: 8px 16px在 Safari 14.0 以下会被整条忽略，必须拆成单独声明 - 不要依赖构建工具自动补全：Autoprefixer 对逻辑属性完全无感；
postcss-logical需显式配置dir和preserve: false才能生成并移除原始逻辑行
表格与内联元素要特别注意作用范围
表格本身不响应 dir 的镜像逻辑，但 td、th 和内部按钮/图标会。错误地只改容器外边距，容易导致 RTL 下操作按钮跑到文字末尾。
- 表格内按钮间距：用
margin-inline-start替代margin-left，确保始终在内容视觉起点 - 表头对齐：用
text-align: start，而非text-align: left - 单元格内图标间隙：用
padding-inline-start，与文字保持起始侧一致 - 避免在
table元素上直接写margin-inline，部分旧版 Edge 解析异常，建议包裹一层div.table-container
动态切换语言时需 JS 协同
仅靠 CSS 双写无法响应运行时 dir 变更（如用户点击切换语言但未刷新页面）。必须用 JS 检测并切换类名，激活对应物理规则。
- 监听
document.dir或读取getComputedStyle(document.documentElement).direction - 切换
html元素的 class，例如class="dir-ltr"/class="dir-rtl" - CSS 中分别定义：
.dir-ltr .btn { margin-left: 8px; }和.dir-rtl .btn { margin-right: 8px; } - Ant Design 等成熟方案已内置
StyleProvider支持运行时方向切换，可直接复用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
