IE全系列（含IE11）、Edge≤16、Chrome旧版本均不支持CSS逻辑属性，解析器直接忽略margin-inline-start等声明，无fallback触发。
旧版浏览器（如 IE11、Android 4.4 WebView、iOS 8 Safari）根本不解析 margin-inline-start 这类逻辑属性，不是“表现异常”，而是直接忽略整条 CSS 规则——连 fallback 都不会触发。
哪些浏览器明确不支持 CSS 逻辑属性
IE 全系列（包括 IE11）、Edge ≤16、Chrome
-
margin-inline-start、padding-block-end、inset-inline等全部被跳过 - 即使写了
margin-inline-start: 16px; margin-left: 16px;，旧浏览器也只认后一条——但前提是后一条没被前一条的语法错误阻断（而实际中，遇到不认识的属性名，整条规则常被丢弃） - MDN 明确标注：这些属性在 caniuse 上的“部分支持”仅指“能解析但行为不一致”，而 IE/旧 Android/iOS 是“完全不识别”
为什么不能靠 autoprefixer 或 postcss 自动降级
autoprefixer 只处理带前缀的物理属性（如 -webkit-flex → display: flex），对逻辑属性无能为力；postcss-logical-properties 这类插件需手动配置映射规则，且无法覆盖所有场景：
- 它不能自动推断 LTR/RTL 上下文——
margin-inline-start在 LTR 下应转margin-left，在 RTL 下却要转margin-right，而构建时通常无运行时方向信息 - Ant Design 等框架用
@ant-design/cssinjs的StyleProvider+legacyLogicalPropertiestransformer 才能安全转换，普通 CSS 工程没这层上下文 - 如果你用的是 Tailwind，
tailwindcss-logical插件只在编译时生成逻辑类名，不负责回退——你得自己配content扫描并双写物理类
最稳妥的落地方式：按需双写 + 特性检测兜底
不要指望一次编写、全局兼容。逻辑属性是渐进增强特性，关键样式必须显式提供物理属性 fallback：
立即学习“前端免费学习笔记（深入）”；
- 写法必须是
margin-left: 16px; margin-inline-start: 16px;，顺序不能反（旧浏览器遇到不认识的属性会跳过该声明，但不影响后续） - 对动态方向切换（如用户点按钮切 RTL），仅靠 CSS 不够，需 JS 检测
document.dir或getComputedStyle并切换 class 名（如dir-ltr/dir-rtl） - 用
CSS.supports('property', 'margin-inline-start')做运行时判断？别试——IE11 报错，CSS对象本身都不存在 - 真正安全的检测是
typeof CSS !== 'undefined' && CSS.supports?.('property', 'margin-inline-start')，但仍需兜住undefined和TypeError
逻辑属性不是“升级替代”，而是“新增能力”。旧环境里，margin-left 和 margin-right 仍是唯一可靠的选择——别把兼容性赌在构建工具或运行时 polyfill 上，它们在关键路径上容易漏掉边界情况。
