margin-inline-start 在 rtl 下未生效的根本原因是缺乏方向上下文，它仅响应 dir 属性或 direction css 声明，不感知语言或浏览器设置；若根元素无 dir="rtl" 或容器缺失 direction: rtl，则等价于 margin-left，无法翻转。
margin-inline-start 在 RTL 下为什么没生效？
根本原因是它没拿到正确的方向上下文。margin-inline-start 不会自己“感知”语言或浏览器设置，它只认 dir 属性或 direction CSS 声明。如果根元素没写 dir="rtl"，或者某个容器漏了 direction: rtl，那 margin-inline-start 就等价于 margin-left，RTL 下完全不翻转。
常见错误现象：阿拉伯语页面里图标被推到屏幕最左边，用户以为“适配了”，其实只是物理左偏移，视觉起点完全错位。
- 检查 HTML 根元素是否带
dir="rtl"（推荐方式）或至少在容器上加style="direction: rtl;" - 别依赖
lang属性——它不影响布局，只影响字体回退和语音合成 - 用 DevTools 查看 computed 样式，确认
margin-inline-start实际解析成了margin-right还是margin-left
哪些 margin 物理属性必须成对替换？
单换 margin-left 为 margin-inline-start 是危险操作。物理属性之间存在隐含镜像关系，拆开换会导致 RTL 下左右不对称、按钮组错位、间距崩塌。
正确做法是按轴统一替换：
-
margin-left和margin-right→ 必须同时换成margin-inline-start与margin-inline-end -
margin-top和margin-bottom→ 推荐换成margin-block-start与margin-block-end（块方向不受 RTL 影响，但语义更清晰） -
margin: 10px 20px 10px 20px不能直接改，得拆成margin-block: 10px+margin-inline: 20px；四值简写在 Safari 14.0 以下会解析异常
旧浏览器怎么 fallback？
IE11 完全不支持 margin-inline-start，Safari 12.1 之前也缺失部分逻辑属性。硬上新属性又不兜底，等于把 RTL 用户直接丢弃。
安全写法是“先物理后逻辑”，且顺序不能反：
- 正确顺序：
margin-left: 1rem; margin-right: 1rem; margin-inline-start: 1rem; margin-inline-end: 1rem;（新浏览器覆盖旧规则） - 错误顺序：
margin-inline-start: 1rem; margin-inline-end: 1rem; margin-left: 1rem; margin-right: 1rem;（新浏览器也被物理值覆盖） - 避免
!important——它干扰后续调整，且在旧引擎中行为不稳定 - 若需不同值（如左 8px 右 16px），就得手动写两套：
[dir="ltr"] .btn { margin-left: 8px; margin-right: 16px; }+[dir="rtl"] .btn { margin-left: 16px; margin-right: 8px; }，但已失去逻辑属性核心价值
编辑器或富文本场景下特别要注意什么？
contenteditable 元素对双向算法极度敏感。margin-left 在阿拉伯语段落里仍推图标到物理左，结果图标悬在文字末尾外侧；text-align: left 会让整段阿拉伯文左对齐，右侧大片空白——这不是样式问题，是破坏了浏览器的 Bidi Algorithm。
必须锁定这几个位置：
- 工具栏按钮：用
margin-inline-end: 4px替代margin-right: 4px，保证按钮始终按阅读顺序排列 - 编辑器容器内边距：
padding-inline-start: 12px确保光标首次进入停在视觉起点（LTR 是左，RTL 是右） - 行内图标：
margin-inline-start: 6px让图标紧贴文字“开头”，不是固定在物理左侧 - 切忌混用：
margin-inline-start+float: right——后者仍按物理方向执行，必然冲突
真正难的不是写对一个 margin-inline-start，而是确保整个组件树的方向上下文一致，且降级时仍可读、可交互。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
