inset 是 css 逻辑定位简写属性，等价于 top/right/bottom/left 四值合并，仅对 absolute/fixed/sticky 元素生效；safari ≤16.4、firefox ≤114、旧版 chrome 等不支持，会静默忽略。
什么是 inset 简写，哪些浏览器不支持
inset 是 CSS Logical Properties 中的简写属性，等价于 top/right/bottom/left 的逻辑方向映射（如配合 dir: rtl 或 writing-mode 自动翻转）。但它在 Safari ≤ 16.4、Firefox ≤ 114、旧版 Chrome 中完全不识别——直接忽略整条声明。
关键判断：如果你用了 inset: 0; 或 inset: 1rem 2rem;，这些浏览器会当它不存在，元素可能彻底错位或消失。
- 不支持的典型错误现象：
position: absolute;元素没撑开、悬浮框位置偏移、全屏覆盖失效 - 检测方式：打开 DevTools → 查看该样式是否被划掉（
inset显示为无效） - 回退不是“增强”，而是“必须存在”的兜底，否则布局崩塌
用 top/right/bottom/left 写物理方向回退
最稳妥的回退是显式写出物理方向四值，并放在 inset 前面——CSS 会按顺序应用，后声明的生效，但不支持 inset 的浏览器跳过它，自然取用前面的物理值。
.modal-overlay {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0; /* 回退：所有浏览器都认 */
inset: 0; /* 支持者覆盖上面四行（更简洁、可继承逻辑方向） */
}
- 顺序不能反：必须
top/right/bottom/left在前，inset在后 - 不要用
inset-block/inset-inline回退——它们兼容性更差，且无法替代四值物理定位 - 如果只设两个值（如
inset: 1rem 2rem），对应写成top: 1rem; right: 2rem; bottom: 1rem; left: 2rem;
遇到 dir="rtl" 或 writing-mode 怎么办
inset 的价值在于自动适配文本方向；纯物理值回退后，dir="rtl" 下 right/left 不会自动交换——你得手动处理。
两种选择：
- 放弃逻辑方向适配，统一用 LTR 物理值（适合管理后台、内部工具等固定方向场景）
- 保留适配：用
[dir="rtl"]重写物理值，例如：[dir="rtl"] .sidebar { left: auto; right: 0; } - 避免混用：不要在同一个规则里既写
inset又写[dir="rtl"]覆盖——容易漏测，建议把逻辑方向适配拆到独立 class 或 JS 控制
PostCSS 插件能自动化这事吗
可以，但要小心。插件如 postcss-logical 或 autoprefixer（v10.4+）能自动补物理回退，但默认只处理 inset-block/inset-inline，对 inset 简写支持不一致。
- 实测：Autoprefixer v10.4.14 对
inset: 0不生成回退，需手动加/* autoprefixer: on */注释触发 - 风险点：插件生成的物理值是静态的（比如永远
top:0），无法响应运行时dir切换 - 建议：仅用于构建时基础回退，
dir动态场景仍需手写条件规则
真正麻烦的从来不是写两行回退代码，而是忘记检查 dir="rtl" 页面在 Safari 上是否还贴着右边——那个 bug 往往上线三天后才被海外用户截图发来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
