旧浏览器如ie11、edge≤16等根本不识别margin-inline-start，整条声明被静默丢弃且@supports检测本身也失效；必须前置物理属性（margin-left/right）、后置逻辑属性（margin-inline-start/end），靠解析顺序兜底，顺序反了将导致新浏览器失去rtl自适应能力。
旧浏览器根本不认识 margin-inline-start，不是“失效”而是静默丢弃
IE11、Edge ≤16、Chrome ≤89、Safari ≤14、Android 4.4 WebView 这些环境连 margin-inline-start 语法都解析不了——整条 CSS 声明被跳过，控制台不报错，也不 fallback。更关键的是，@supports (margin-inline-start: 0) 在这些浏览器里本身是非法语法，整个 @supports 块会被忽略，根本不会执行里面的 fallback 规则。
这意味着你不能依赖运行时检测，必须在写 CSS 的那一刻就决定：传统物理属性写在前面，逻辑属性写在后面，靠浏览器顺序解析来“兜底”。
-
margin-left: 1rem;和margin-right: 1rem;必须前置（旧浏览器只读这一行） -
margin-inline-start: 1rem;和margin-inline-end: 1rem;后置（新浏览器覆盖前两行） - 顺序反了会导致新浏览器也走物理逻辑，失去 RTL 自适应能力
-
margin-inline: 1rem 2rem这种简写在 Safari 14.0 以下会被整条丢弃，不能替代双写
用 postcss-logical 转译，但得确保它真能跑进构建流程
postcss-logical 是目前最直接的转译方案，它能把 margin-block-start、inset-inline、padding-inline 等全部转成物理属性。但它只处理 .css 或 .pcss 文件，对 <style></style> 标签内联样式、JS 动态拼接的字符串样式完全无效。
常见失效场景：
- Webpack 中
css-loader配了exportOnlyLocals: true→ 原始逻辑属性被剥离，postcss-logical没东西可转 -
postcss-loader的sourceMap设为true→ 旧浏览器解析失败会静默丢弃样式 - 前置插件如
postcss-custom-properties提前把--gap: 1rem编译成gap: 1rem→postcss-logical失去上下文，漏掉逻辑方向映射 - 没配
{ preserve: true }却又需要动态切换dir="rtl"→ 转译后只剩一套 LTR 物理值，RTL 下错位
StyleProvider hashPriority="high" 只解决 :where，不碰逻辑属性
Ant Design Vue / Ant Design 的 StyleProvider 里设 hashPriority="high"，只是让组件样式从 :where(.ant-btn) { ... } 变成 .ant-btn { ... }，移除 :where 包裹——它**完全不影响** margin-inline-start 这类逻辑属性的生成或降级。
如果你的目标是兼容旧浏览器，光关 :where 不够，还必须单独处理逻辑属性：
- 用
StyleProvider transformers={[legacyLogicalPropertiesTransformer]}（需从@ant-design/cssinjs引入） - 或者在项目级统一用
postcss-logical，避免组件库和业务样式逻辑不一致 - 注意
legacyLogicalPropertiesTransformer不支持place-items或inset-block等较新属性，覆盖范围比postcss-logical小
真正麻烦的不是写错一个 padding-inline，而是漏掉 writing-mode 全链路适配
逻辑属性的价值不在“写起来酷”，而在整套盒模型响应 dir 和 writing-mode。一旦混用，错位是必然的：
-
width和height必须同步换成inline-size和block-size，否则writing-mode: vertical-rl下尺寸计算全乱 -
margin-top必须配margin-block-start，不能只换一半 -
text-align: start替代text-align: left，但lang="ar"不能代替dir="rtl"—— 没设dir，start就是摆设 - Safari 15.6 及更早对
box-sizing: border-box+inline-size支持不全，得用@supports (inline-size: 100px)包裹并提供width回退
最易被忽略的一点：你写了十个 margin-left，上线后加个 dir="rtl"，所有地方都要重测——逻辑属性不是锦上添花，是方向耦合的基础设施。要不要降级，得看你的用户是否真的还在用 Edge 16。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
