margin-inline-start在移动端rtl页面失效的根本原因是仅设置css的direction: rtl而漏掉html的dir属性，safari等浏览器强依赖dir属性触发逻辑映射，仅靠css声明无法使margin-inline-start自动映射为margin-right。
直接用 margin-inline-start、padding-block 和 text-align: start 就能自动适配 LTR/RTL，不用写两套 CSS，也不靠 JS 切换 class —— 但前提是 dir 属性必须设对，且不能只靠 direction CSS 声明。
为什么 margin-inline-start 在移动端 RTL 页面里经常失效？
根本原因不是浏览器不支持，而是开发者只写了 direction: rtl，却漏掉了 HTML 的 dir 属性。Safari（尤其 iOS WebKit）对逻辑属性的计算强依赖 dir 的 HTML 属性值，仅靠 CSS 的 direction 不触发映射。
-
margin-inline-start: 16px在下才等效于margin-right: 16px；若只写html { direction: rtl; }，它仍按 LTR 解析，表现为“没反应” - React/Vue 等框架中动态切换语言时，必须显式设置
document.documentElement.setAttribute('dir', 'rtl')，不能只改 CSS 变量或 class - 混合语言场景（如阿拉伯语页面里嵌英文段落），需在子容器上加
dir="ltr"，否则子元素继承错误的起始侧逻辑
inset-inline-start 替代 left 时绝对定位为啥还跑偏？
物理定位属性（left/right）和逻辑定位（inset-inline-start）的参考系不同：前者锚定视口左边缘，后者锚定内容流的“起始侧”。当父容器 dir="rtl" 但未设置 writing-mode 时，inset-inline-start 的起始侧是右，但开发者常误以为它会“翻转”已有 left: 0 的视觉位置。
- 错误写法：
position: absolute; left: 8px;→ RTL 下仍贴屏幕左边，文字被遮挡 - 正确写法：
position: absolute; inset-inline-start: 8px;→ LTR 下等效left: 8px，RTL 下自动变成right: 8px - 注意：如果父容器用了
transform或will-change，某些旧版 Safari 可能跳过逻辑 inset 计算，建议加contain: layout强制重排
哪些地方最容易漏掉逻辑属性，导致 RTL 下局部崩坏？
开发者常只改外边距和内边距，却忽略边框、浮动、伪元素和表单控件的逻辑化，结果按钮图标对齐了，但边框还在错边，下拉箭头卡在左侧。
-
border-left必须换成border-inline-start，否则 RTL 下“起始边框”出现在右侧，视觉上变成右边框 -
float: left改为float: inline-start，Safari 15.4+ 才稳定支持，旧版需降级：@supports not (float: inline-start) { [dir="rtl"] .nav-item { float: right; } } -
::before { left: 0; }必须改为::before { inset-inline-start: 0; }，否则气泡箭头永远钉在物理左侧 -
<input type="search">的清除按钮（::-webkit-search-cancel-button）在 Safari 中不响应dir，需额外用transform: scaleX(-1)镜像处理
真正难的不是记住所有逻辑属性名，而是在整个组件系统里保持方向语义一致——只要一个 margin-right 没替换，RTL 下就可能让整行按钮错位。这不是“加个功能”，而是布局是否从一开始就没绑定物理方向的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
