margin-inline-start等逻辑属性需显式声明dir="rtl"才生效，仅lang="ar"无效；它依赖HTML的dir属性或CSS的direction声明，而非浏览器语言设置。
直接用 margin-inline-start、padding-inline-end 和 text-align: start 就能自动适配 LTR/RTL，但前提是方向必须显式声明——光靠 lang="ar" 或浏览器语言设置完全没用。
为什么 margin-inline-start 在 RTL 页面里没翻转？
它根本不会读取浏览器默认语言或页面内容方向，只响应 HTML 的 dir 属性或 CSS 的 direction 声明。常见错误是只写了 <html lang="ar"> 却漏掉 dir="rtl"，结果 computed style 里它还是解析成 margin-left。
-
<html dir="rtl">必须真实存在于 DOM 根节点（React/Vue 中要确认框架没拦截或覆盖） - 局部 RTL 内容（比如英文页中嵌一段阿拉伯语）得用
<p dir="rtl">显式包裹 - 避免仅靠
div { direction: rtl; }：Safari ≤15.6 对继承链不敏感，必须写在目标元素上或根节点
margin-inline 简写能不能直接替代 margin-left + margin-right？
可以，但必须成对替换，且注意 Safari 兼容性限制。物理边距存在隐含镜像关系，单点替换会破坏 RTL 下的视觉对称。
- 导航项用
margin-right: 8px分隔 → 改为margin-inline-end: 8px - 如果容器同时有
margin-left: 16px控制外边距 → 必须同步换成margin-inline-start: 16px -
margin: 10px 20px 10px 20px不能套margin-inline: 20px——它只管 inline 轴，垂直方向还得配margin-block: 10px -
margin-inline: 8px 16px在 Safari 14.0 以下会被忽略，必须拆成margin-inline-start: 8px和margin-inline-end: 16px
哪些逻辑属性现在能放心用，哪些要格外小心？
2026 年中，Chrome 120+、Firefox 125+、Safari 15.4+ 已稳定支持三类核心逻辑属性，但部分场景仍需手动兜底：
立即学习“前端免费学习笔记（深入）”；
- 盒模型类：
margin-inline-start、padding-block-end、border-inline-start—— 可安全替换对应物理属性 - 定位类：
inset-inline-start（替代left）、inset-block-end（替代bottom）—— 注意旧版 Safari 对inset支持不一致 - 文本类：
text-align: start/end—— 彻底弃用left/right，无兼容风险 -
inline-size/block-size替换width/height是高危操作：必须成对替换，且writing-mode会影响语义；flex 子项中单独设inline-size容易被flex-basis覆盖
旧浏览器兜底为什么不能只靠 @supports (margin-inline: 0)？
IE11、Safari 12.1 之前、部分 SSR 渲染环境根本不识别 @supports，整块规则会被跳过，导致无 fallback。
- 更稳妥的做法是并存写法：
margin-left: 16px; margin-inline-start: 16px;—— 现代浏览器用后者，旧浏览器回退到前者 - 别依赖 PostCSS 自动补全：它生成的 fallback 不一定覆盖所有边界情况（如
border-inline在 Safari ≤15.6 下被忽略） -
float: inline-start在 Safari 15.4+ 才可靠，旧版仍需降级为[dir="rtl"] { float: right; }
真正容易被忽略的是 writing-mode 对逻辑轴的彻底重定义——比如 vertical-rl 下 margin-inline-start 指向顶部而非左右，这种场景下仅检查 dir 远远不够。
