margin-inline-start在RTL页面未生效是因为它仅响应显式设置的dir属性或direction CSS声明，不读取浏览器默认语言或内容方向；若HTML根节点未设dir="rtl"或CSS未声明direction: rtl，则仍映射为margin-left。
margin-inline-start 为什么在 RTL 页面里没生效
它根本没读到方向信息——margin-inline-start 不会自动识别浏览器语言或页面内容，只响应显式设置的 dir 属性或 direction CSS 声明。常见错误是只改了 <html lang="ar"> 却漏掉 dir="rtl"，结果 computed style 里它还是解析成 margin-left。
必须检查三处：
-
<html dir="rtl">是否真实存在于 DOM 根节点（React/Vue 中注意是否被框架拦截） - 局部元素是否用
dir="rtl"显式包裹嵌入的 RTL 片段（比如阿拉伯语段落混在英文页面中） - 避免仅靠
direction: rtlCSS 规则：某些 Safari 版本（≤15.6）对继承链不敏感，必须写在目标元素上或根节点
哪些逻辑属性现在能放心替换物理属性
2026 年中，Chrome 120+、Firefox 125+、Safari 15.4+ 已稳定支持以下三类，且 PostCSS 插件可生成 fallback：
- 盒模型类：
margin-inline-start、padding-block-end、border-inline-start - 定位类：
inset-inline-start（替代left）、inset-block-end（替代bottom） - 文本类：
text-align: start、text-align: end（彻底弃用left/right）
注意：float: inline-start 在 Safari 15.4+ 才可靠，旧版仍需降级为 [dir="rtl"] { float: right; }。
立即学习“前端免费学习笔记（深入）”；
inline-size / block-size 替换 width / height 的坑
只换 margin 类属性而不动尺寸定义，依然会翻车。原因在于 width/height 在 writing-mode: vertical-rl 下行为反直觉：width 控制的是视觉上的上下方向，height 反而控制横向宽度。
- 必须成对替换：
width→inline-size，height→block-size，不能混用 -
box-sizing: border-box对逻辑尺寸有效，但 Safari ≤15.6 会忽略border-inline，需用@supports降级 - 别在 flex/grid 容器子项里单独设
inline-size微调宽度——它可能被主轴尺寸覆盖，优先用flex-basis或min-inline-size
旧浏览器兼容怎么兜底才真正安全
别依赖 @supports (margin-inline: 0) 做降级——IE11、Safari 12.1 之前、部分 SSR 环境根本不识别 @supports，整块规则会被跳过，导致无 fallback。
更稳妥的做法是并存写法：
button {
margin-left: 1rem;
margin-right: 1rem;
margin-inline: 1rem;
}
旧浏览器读前两行，新浏览器覆盖为第三行。PostCSS 插件（如 postcss-logical）可自动补全，但它不处理运行时动态切换 dir 的场景，只适用于构建时静态转换。
真正麻烦的不是某一行写错，而是写了十个 margin-left 后，发现只要改 dir 就全得重测——逻辑属性的价值不在语法新潮，而在把方向耦合从样式层彻底抽离。
