直接替换 margin-left 为 margin-inline-start 易出问题，因逻辑属性依赖 writing-mode 和 direction 正确设置；若未声明 dir="rtl" 或 direction: rtl，则其行为等同 margin-left，无法在 RTL 下自动翻转。
为什么直接替换 margin-left 会出问题
直接把 margin-left 换成 margin-inline-start 看似合理，但实际容易漏掉上下文依赖。逻辑属性生效的前提是书写模式（writing-mode）和文本方向（direction）已正确设置。如果页面没声明 dir="rtl" 或根元素缺少 direction: rtl，margin-inline-start 就等价于 margin-left，RTL 下完全不翻转。
哪些 margin 物理属性必须成对替换
单个替换往往导致布局错乱，因为物理属性之间存在隐含的镜像关系。例如：
-
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
IE11 及旧版 Safari 的兼容性断点在哪
margin-inline-start 在 IE11 完全不支持，Safari 12.1 之前也缺失部分逻辑属性。若需兼容：
- 用 PostCSS 插件（如
postcss-rtlcss）在构建时生成双份规则：margin-left+margin-inline-start - 避免依赖
:dir(rtl)选择器（IE11 不识别），改用类名钩子如.rtl .button - 不要用
margin-inline四值简写——它在 Safari 14.0 以下解析异常，老版本只认两值或单值形式
图标与文字间距在 RTL 下容易被忽略的细节
按钮内图标常靠 margin-left 与文字分隔，换成 margin-inline-start 后，在 RTL 下图标会跑到文字右边，但视觉预期通常是“图标始终在操作主语左侧”（即逻辑上的“前”）。这时要：
立即学习“前端免费学习笔记（深入）”；
- 给图标加
margin-inline-end: 8px（让它总在文字“之后”，即 RTL 下的左边） - 或用
flex-direction: row-reverse配合justify-content: flex-end控制整体流向 - 切忌混用物理和逻辑属性在同一组件里，比如
margin-inline-start+float: right，后者仍按物理方向执行，会冲突
margin-inline-start，而是确保整个组件树的方向上下文一致，且 fallback 方案在降级时仍可读、可交互。 
