旧版浏览器完全不支持margin-inline-start，而是静默丢弃整条声明；ie全系列、edge≤16、chrome≤89、android webview 4.4、safari≤14均无法解析该属性及@supports检测，必须显式双写margin-left/margin-right并置于逻辑属性之前。
旧版浏览器不是“失效”，而是压根不认识 margin-inline-start 这类属性——整条 CSS 声明被静默丢弃，控制台不报错、也不 fallback。
哪些浏览器完全不支持逻辑属性
IE 全系列（含 IE11）、Edge ≤16、Chrome ≤89、Android WebView 4.4、Safari ≤14 —— 这些内核连 @supports (margin-inline-start: 0) 都无法解析，更别说执行了。MDN 和 caniuse 标注的“部分支持”，对它们来说等于“零支持”。
为什么 autoprefixer 或 postcss-logical 有时没用
-
autoprefixer只处理带前缀的物理属性（比如-webkit-flex），对逻辑属性完全无感 -
postcss-logical确实能转译，但必须满足三个前提：CSS 文件走 PostCSS 流程（style标签内联或 JS 注入的样式不会被处理）、插件在css-loader之前运行、且未被其他插件（如postcss-custom-properties）提前编译掉原始逻辑声明 - 如果配置了
{ preserve: true }却没设dir，它会同时输出 LTR 和 RTL 的物理属性，但旧浏览器仍只读取你写在前面的那组（顺序很重要）
双写 fallback 的正确顺序和陷阱
必须写成：margin-left: 1rem; margin-right: 1rem; margin-inline-start: 1rem; margin-inline-end: 1rem;
原因很实际：
- 旧浏览器遇到不认识的
margin-inline-start，直接跳过该声明，但不影响后续语句执行 - 如果反过来先写逻辑属性，新浏览器会按层叠规则覆盖后面的
margin-left，但在 RTL 下这会导致方向错乱 -
margin-inline: 1rem这种简写在 Safari 14.0 以下会被整条丢弃，不能替代双写 - RTL 页面里硬写
margin-left当 fallback 是危险的——它在新浏览器中对应的是margin-inline-end，不是起始边
动态切换书写方向时，纯 CSS 不够用
构建时不知道用户最终是 LTR 还是 RTL，所以 postcss-logical 无法智能选择 fallback 方向。哪怕用了 dir="rtl"，旧浏览器也只认物理属性，且不会根据 document.dir 自动切换。
真正要支持按钮点击切换语言方向，得靠 JS：
- 监听
document.dir变化或手动切换 class（如dir-ltr/dir-rtl） - 配合预置的两套物理属性（
.dir-ltr .btn { margin-left: 8px; }+.dir-rtl .btn { margin-right: 8px; }） - 别依赖
CSS.supports()做运行时检测——IE11 里CSS对象根本不存在，会直接抛ReferenceError
逻辑属性不是“升级替代”，是新增能力；旧环境里，margin-left 和 margin-right 仍是唯一可靠的选择——兼容性不能赌在构建工具或运行时 polyfill 上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
