旧版浏览器（如ie11、edge17及更早、android webview 4.4、safari≤14）完全不识别margin-inline-start等逻辑属性，整条声明被静默跳过且不报错，也不支持@supports检测，必须显式提供物理fallback并按先margin-left/margin-right后逻辑属性的顺序书写。

旧版浏览器压根不认 margin-inline-start 这类逻辑属性，不是“不生效”，是整条声明被 CSS 解析器直接跳过——控制台零报错，元素看起来像没写样式。

旧浏览器连 @supports 都不支持，没法做渐进增强

IE11、Edge 17 及更早、Android WebView 4.4、Safari ≤14 这些内核，既不识别 margin-inline-start，也不认识 @supports (margin-inline: 0) 规则。你写个 @supports 块，它们会直接忽略整个 @supports 区域，连里面的 fallback 都不执行。

• 别指望构建工具自动补 fallback：autoprefixer 对逻辑属性完全无感
• postcss-logical 必须显式配置 dir 和 preserve: false，否则只追加物理属性却不删原始逻辑行，旧浏览器照样跳过
• 若页面默认是 RTL（比如 dir="rtl"），postcss-logical 的 dir 配置必须设为 'rtl'，否则 margin-inline-start 会被错误映射成 margin-left 而非 margin-right

margin-inline: 1rem 这种简写在 Safari ≤14 下直接失效

margin-inline: 1rem 是 margin-inline-start: 1rem; margin-inline-end: 1rem 的简写，但 Safari 14.0 及更早版本连这个简写都不解析，整条声明被丢弃。

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• 必须拆开写：margin-left: 1rem; margin-right: 1rem; margin-inline-start: 1rem; margin-inline-end: 1rem;
• 顺序不能反：先写物理 fallback，再写逻辑属性；反过来会导致新浏览器里物理值覆盖逻辑值，RTL 场景下直接错位
• margin-inline: 8px 16px 这种双值语法，在 Safari ≤14 中同样被整条跳过，必须拆成两个独立声明

RTL 场景下 margin-left 不是安全 fallback

如果页面用了 dir="rtl" 或 writing-mode: vertical-rl，margin-inline-start 在新浏览器中映射的物理方向就不是 margin-left 了。硬写 margin-left 会导致阿拉伯语按钮贴左、图标跑偏、首行缩进断裂。

• 纯靠 CSS 无法自动判断上下文方向并切换 fallback
• 需要 JS 检测 document.documentElement.dir 后动态注入对应样式，或用构建工具预编译 LTR/RTL 两套规则
• 常见错误：只改了部分组件用 margin-inline-start，其他地方仍用 float: left 或 text-align: left，导致内联流顺序断裂

最麻烦的不是样式不出现，而是它静默消失——你得盯着 Elements 面板里那些被划掉的声明，再一层层确认 fallback 是否真被旧浏览器读到了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！