为什么CSS logical properties逻辑属性在旧版浏览器不认

IE全系列（含IE11）、Edge≤16、Chrome旧版本均不支持CSS逻辑属性，解析器直接忽略margin-inline-start等声明，无fallback触发。

为什么css logical properties逻辑属性在旧版浏览器不认_改用物理属性

旧版浏览器（如 IE11、Android 4.4 WebView、iOS 8 Safari）根本不解析 margin-inline-start 这类逻辑属性，不是“表现异常”，而是直接忽略整条 CSS 规则——连 fallback 都不会触发。

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 只处理带前缀的物理属性（如 -webkit-flex → display: flex），对逻辑属性无能为力；postcss-logical-properties 这类插件需手动配置映射规则，且无法覆盖所有场景：

它不能自动推断 LTR/RTL 上下文——margin-inline-start 在 LTR 下应转 margin-left，在 RTL 下却要转 margin-right，而构建时通常无运行时方向信息
Ant Design 等框架用 @ant-design/cssinjs 的 StyleProvider + legacyLogicalProperties transformer 才能安全转换，普通 CSS 工程没这层上下文
如果你用的是 Tailwind，tailwindcss-logical 插件只在编译时生成逻辑类名，不负责回退——你得自己配 content 扫描并双写物理类

不要指望一次编写、全局兼容。逻辑属性是渐进增强特性，关键样式必须显式提供物理属性 fallback：

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

写法必须是 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