旧浏览器静默丢弃margin-inline，不报错；ie11、edge17及更早、android webview 4.4、safari≤14均不支持，且不识别@supports检测；必须显式提供物理fallback，推荐先写margin-left/margin-right，再写margin-inline覆盖。
旧浏览器直接忽略margin-inline，不是报错而是静默丢弃
IE11、Edge 17 及更早、Android WebView 4.4、Safari ≤14 都不识别 margin-inline，连带整个声明行被跳过——你不会看到控制台报错，但元素看起来“没加边距”。更麻烦的是，它们也不支持 @supports (margin-inline: 0)，所以不能靠 CSS 级的特性检测做渐进增强。
必须显式提供传统 fallback，且顺序不能反
最稳妥的做法是先写物理方向属性，再覆盖逻辑属性。旧浏览器读到第一行就生效，新浏览器解析第二行时会覆盖前者：
button {
margin-left: 1rem;
margin-right: 1rem;
margin-inline: 1rem; /* 仅新浏览器生效 */
}
-
margin-inline: 1rem是margin-inline-start: 1rem; margin-inline-end: 1rem的简写，只在现代浏览器中覆盖上面两行 - 若反过来写（先逻辑后物理），旧浏览器虽忽略逻辑行，但物理行仍会生效；而新浏览器因层叠规则，物理行会错误覆盖逻辑行——导致 RTL 下失效
- 不要用
margin-inline-start单独写然后指望旧浏览器 fallback：它同样不被识别，不会退化为margin-left
遇到 RTL 或竖排场景时，fallback 不能简单等价替换
如果你的页面实际用了 direction: rtl 或 writing-mode: vertical-rl，那 margin-inline-start 在新浏览器中映射的物理方向就不是 margin-left 了。此时硬写 margin-left 会错位：
- 在
direction: rtl下，margin-inline-start对应的是右侧，fallback 应该是margin-right: 1rem - 在
writing-mode: vertical-rl下，margin-inline-start对应顶部，fallback 应该是margin-top: 1rem - 纯靠 CSS 无法自动判断上下文方向并切换 fallback，必须由 JS 检测后动态注入对应样式，或用构建工具（如 PostCSS）预编译多套规则
Firefox 对 margin-inline: auto 的支持滞后需单独处理
Firefox 直到 v115 才支持 margin-inline: auto 居中，而 Chrome/Safari 早已支持。如果你写了 margin-inline: auto 且依赖居中效果，Firefox 旧版本会完全忽略该行，元素贴左（LTR）或贴右（RTL）——看起来像“没居中”，实则是整条声明被丢弃。
- fallback 方案只能是双写：
margin: 0 auto;+margin-inline: auto;，但要注意：前者是物理简写，后者是逻辑属性，语义不同，混用可能引发意外交互 - 更安全的做法是避免在需要兼容 Firefox margin-inline: auto，改用明确宽度 +
margin: 0 auto - 检查目标用户环境：若统计显示 Firefox
实际落地时最容易被忽略的一点：逻辑属性的 fallback 不是“写个替代就行”，而是要对齐其运行时映射的真实物理方向——这取决于元素自身的 direction 和 writing-mode 计算值，而非 HTML 的 dir 属性或父容器设置。DevTools 的 Computed 面板里看 margin-inline-start 的最终像素值，才是唯一可信依据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
