旧浏览器静默丢弃margin-inline-start，不报错也不fallback；IE11、Edge17及更早、Android WebView 4.4、Safari≤14均不支持，且不识别@supports检测，必须显式提供物理fallback并按先左/右后逻辑的顺序书写。
旧浏览器直接忽略margin-inline-start，不是报错而是静默丢弃
IE11、Edge 17 及更早、Android WebView 4.4、Safari ≤14 这些内核根本不识别margin-inline-start这类逻辑属性——整条声明被跳过，控制台零提示，元素看起来“没加边距”。更关键的是，它们连@supports (margin-inline: 0)都不支持，所以无法用 CSS 级特性检测做渐进增强。
- 不要指望构建工具自动兜底：
autoprefixer对逻辑属性完全无感；postcss-logical能转译，但必须显式配置dir和preserve: false，否则只追加物理属性却不移除原始逻辑行，旧浏览器仍会忽略整条规则 -
postcss-dir-pseudo只生成:dir(ltr)选择器，不转译属性本身，混用它和逻辑属性等于白忙 - 若页面默认是 RTL（如阿拉伯语站），
postcss-logical的dir配置必须设为'rtl'，否则margin-inline-start会被错误映射成margin-left而非margin-right
margin-inline: 1rem不能替代margin-left/margin-right双写
margin-inline: 1rem是margin-inline-start: 1rem; margin-inline-end: 1rem的简写，但它在 Safari 14.0 以下会被整个声明丢弃——旧浏览器连这个简写都不认。必须拆开写，且 fallback 顺序不能反。
- 正确写法：
margin-left: 1rem; margin-right: 1rem; margin-inline-start: 1rem; margin-inline-end: 1rem;——旧浏览器读前两行，新浏览器覆盖后两行 - 反过来写（先逻辑后物理）会导致新浏览器层叠时物理属性覆盖逻辑属性，在 RTL 下失效
-
margin-inline: 8px 16px这种带两个值的语法，Safari 14.0 以下直接跳过整条声明，必须拆成单独的margin-inline-start和margin-inline-end
RTL 场景下margin-left不是margin-inline-start的安全 fallback
如果页面实际用了dir="rtl"或writing-mode: vertical-rl，那margin-inline-start在新浏览器中映射的物理方向就不是margin-left了。硬写margin-left会导致 RTL 下按钮贴左、间距错位。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 纯 CSS 无法自动判断当前
dir并切换 fallback，构建时没有运行时方向信息 - 动态切 RTL（比如用户点按钮）时，仅靠 CSS 双写不够，需 JS 检测
document.dir或getComputedStyle，然后切换 class（如dir-ltr/dir-rtl）来激活对应物理属性 - 像 Ant Design 这类框架用
@ant-design/cssinjs的StyleProvider配合legacyLogicalPropertiesTransformer才能安全转换，普通项目没这层上下文
Tailwind 用户别只装tailwindcss-logical就完事
插件只在编译时生成margin-inline-start这类类名，不负责 fallback ——你得自己在content里配好扫描路径，并手动双写物理类，比如同时用ml-4 mr-4和ms-4 me-4。
立即学习“前端免费学习笔记（深入）”；
- 确认 Tailwind 版本：v2 需装
tailwindcss-logical@2.0.0，v3+ 才支持最新版 - 插件不会处理运行时 dir 切换，JS 动态改
document.documentElement.dir后，必须同步切换 class 才能触发对应物理样式 - SSR 渲染时服务端没写
dir，前端补上会触发重排闪动，根元素必须服务端直出
