margin-inline在dir="rtl"下不生效是因元素自身direction未显式设为rtl，需检查Computed面板确认解析结果，成对替换物理属性并用@supports提供fallback。
margin-inline在dir="rtl"下不生效，先查元素自身的direction
它不继承父级的dir或direction，只看目标元素自己有没有被显式设置。哪怕<html dir="rtl">写了，如果按钮组件内部CSS重置了direction: ltr，margin-inline-start就仍指向物理左侧——不是bug，是规范行为。
实操建议：
- 用 DevTools 的 Computed 面板直接看目标元素的
margin-inline-start最终解析成了margin-left还是margin-right - 避免在组件库 reset 样式里写
direction: ltr，改用unicode-bidi: plaintext隔离 bidi 影响 - 对关键布局节点（如表单标签、按钮组），显式加
dir="auto"或继承父级dir，别依赖隐式继承
迁移老代码时，margin-left/margin-right不能只改一半
常见错误是把margin-right: 8px改成margin-inline-end: 8px，却漏掉同级的margin-left: 16px。结果在 RTL 下，margin-inline-end映射到左边，margin-left还在左边，视觉上变成双倍左偏移，内容被挤出视口。
必须成对替换：
立即学习“前端免费学习笔记（深入）”；
-
margin-left: A→margin-inline-start: A -
margin-right: B→margin-inline-end: B - 若原写法是
margin: 0 8px，应改为margin-inline: 0 8px（注意：不支持三值简写） - 第三方 UI 库（如 Ant Design）类名内部仍用物理属性，需用 wrapper 元素包裹并单独控制
margin-inline，别试图覆盖原生类
@supports + 物理属性 fallback 是唯一可靠降级方案
margin-inline在 IE11、Safari ≤14、Android WebView 4.4 等环境静默失效——整条声明被丢弃，不会报错，但边距归零。靠@supports (margin-inline: 1em)检测再覆盖，是最小侵入、最可控的方式。
正确写法示例：
button {
margin-left: 1rem;
margin-right: 1rem;
@supports (margin-inline: 1rem) {
margin-inline: 1rem;
}
}
注意点：
- 不要把物理属性写在
@supports块里，否则旧浏览器会全丢 -
margin-inline: 1rem等价于margin-inline-start: 1rem; margin-inline-end: 1rem，fallback 也得是两边都设，不能只写margin-left - 若需不同 start/end 值（如
margin-inline: 1rem 2rem），fallback 必须拆成margin-left: 1rem; margin-right: 2rem，且明确对应方向
margin-inline: auto居中在Firefox里要特别小心
Firefox 直到 v115 才支持单值margin-inline: auto，之前版本会直接忽略整条声明，导致元素贴边。Chrome/Safari 早支持，但混用时容易踩坑。
安全写法：
- 优先用
margin-inline: 0 auto（双值），Firefox 110+ 已稳定支持 - 避免
margin-inline: auto这种单值写法，尤其在需要兼容 Firefox 114 及更早版本时 - 若必须用单值，加
@supports (margin-inline: auto)包裹，并为不支持的浏览器提供text-align: center+display: inline-blockfallback -
margin-inline: auto仅在块级元素 + 有明确宽度（width、max-width或固有尺寸）时生效，缺一不可
dir和writing-mode的运行时变化。但这也意味着，任何未显式声明方向上下文、未配对替换、未做 fallback 的使用，都会在某个浏览器或某种语言环境下静默失败。 
