margin-inline 在 chrome 87+、firefox 63+、safari 14.1+ 原生支持，ie 全不识别，旧版 edge（12–18）亦不支持。
margin-inline 在 Chrome 87+、Firefox 63+、Safari 14.1+ 才原生支持，IE 完全不识别，旧版 Edge（margin-left/margin-right —— 浏览器不认识就跳过，不会 fallback。
哪些浏览器会完全忽略 margin-inline
旧版浏览器不是报错，而是静默丢弃整条规则。典型表现：
- IE11 及更早版本：解析时直接跳过
margin-inline: 1rem;，不生效也不影响其他样式 - Edge 17 及以下：同 IE，使用 Trident 渲染引擎，无逻辑属性支持
- Safari 12–14.0：部分支持
inset但margin-inline未实现，CSSOM 中查不到该属性值 - Android Browser 4.4（WebView）：基于旧 WebKit，不识别任何逻辑方向属性
手动 fallback 的两种可靠写法
不能依赖 @supports 做渐进增强（因为旧浏览器连 @supports (margin-inline: 0) 都不解析），必须显式提供传统方向声明：
-
方案一：先写传统，再覆盖逻辑属性（推荐）
旧浏览器读到第一行就用上，新浏览器解析第二行覆盖——顺序不能反
button {
margin-left: 1rem;
margin-right: 1rem;
margin-inline: 1rem; /* 覆盖上面两行，仅新浏览器生效 */
}
-
方案二：用
@supports包裹逻辑属性（仅限现代构建环境）
需确认构建工具（如 PostCSS）不提前剥离该规则；实际运行时，旧浏览器因不支持@supports语法，会跳过整个块
@supports (margin-inline: 0) {
button {
margin-inline: 1rem;
}
}
/* 旧浏览器 fallback 必须写在 @supports 外面 */
margin-inline 和 margin-left/margin-right 的行为差异
表面看是“左右换名”，但实际有三处关键区别，直接替换可能出视觉偏差：
-
margin-inline: 1rem 2rem等价于margin-left: 1rem; margin-right: 2rem;（ltr）或margin-left: 2rem; margin-right: 1rem;（rtl）——方向感知，而传统写法是硬编码 - 当父容器
direction: rtl且未设text-align时，margin-inline-start始终贴左边界（视觉左），但margin-left会变成“物理右”，容易错位 - Flex/Grid 容器中，
margin-inline仍作用于块轴（即垂直方向），而margin-left始终是内联轴——混用时布局意图易被破坏
PostCSS 自动转换的注意事项
如果用 postcss-logical 或 autoprefixer（v10.4+）自动补全，注意三点：
- 默认只处理
margin-inline-start/margin-inline-end，不处理简写margin-inline—— 需升级插件或手动拆解 - 转换后生成的
margin-left/margin-right不带!important，若原逻辑属性带权重，需人工校验 - RTL 场景下，插件通常只生成 LTR 版本，若项目需服务双向文本，必须额外加
[dir="rtl"]规则手动覆盖
真正难的不是加几行 fallback，而是意识到：逻辑属性不是“语法糖”，它绑定着书写模式（writing-mode）和文本方向（direction）。一旦页面存在 RTL 内容或 vertical-lr 排版，硬写 margin-left 就等于放弃语义控制权。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
