inset-inline-start 不生效是因为缺少显式 direction 或 dir 声明；Safari≤15.6 要求声明必须在目标元素或最近定位父容器上，且不能混用 left/right，需完整替换并配合 inset-block 使用。
直接用 inset-inline-start 和 inset-inline-end 替换 left/right 就能自动适配 RTL，但必须确保父元素或根节点有明确的 dir 属性，否则它根本不会“镜像”。
为什么 inset-inline-start 不生效？常见方向缺失
它不读取浏览器语言、lang 属性，也不继承 body 的隐含方向。只响应显式声明的 direction 或 HTML 的 dir。Safari ≤15.6 还要求该声明必须在**目标元素自身或其最近的、有定位上下文的父容器上**，不能只靠 html[dir="rtl"] 向下透传。
- 错误写法：
→ 没有dir，inset-inline-start仍按 LTR 解析为left - 正确写法：
，或对关键定位容器加div[dir="rtl"] { direction: rtl; } - React/Vue 中需确认框架没覆盖根节点的
dir属性（比如 SSR 渲染后被 JS 重写）
inset-inline-start 和 left 能混用吗？不能，会失效
两者语义冲突：CSS 规范明确要求，当物理偏移（left/right）和逻辑偏移（inset-inline-start/inset-inline-end）同时存在时，物理属性优先级更高，逻辑属性会被忽略。
- 写了
left: 20px; inset-inline-start: 1rem;→ 实际生效的是left: 20px，RTL 下不会翻转 - 必须彻底替换：删掉所有
left/right，只保留inset-inline-start和inset-inline-end - 若需动态控制某一边（如仅固定起始侧），用
inset-inline-start: 1rem;+inset-inline-end: auto;，别留空值
怎么配合 inset-block 完整定位？不能只设一个
inset-inline-start 只管行内轴（水平方向），垂直方向必须显式声明 inset-block-start 或 inset-block-end，否则定位不完整，浏览器行为不可控。
- 悬浮按钮贴“内容起始侧+底部”：
inset-block-end: 1rem; inset-inline-start: 1rem;✅ - 只写
inset-inline-start: 1rem;→ 垂直方向回退到默认（通常是top: 0），非预期行为 ❌ - 避免混搭：
top: 1rem; inset-inline-start: 1rem;→ 物理top会压制逻辑属性，且破坏方向一致性 - 全向定位更推荐简写：
inset: 1rem 1rem 1rem 1rem;（等价于四边都设）或inset: 0;（撑满）
Safari 兼容性与兜底陷阱
Chrome 120+、Firefox 125+、Safari 15.4+ 已稳定支持，但 Safari 14.0 及更早版本会直接忽略 inset-inline 系列；更危险的是，@supports (inset-inline-start: 0) 在 IE11 或某些 SSR 环境中整条规则会被跳过，导致无 fallback。
- 安全兜底不是靠
@supports，而是用物理属性写在前面：left: 1rem; inset-inline-start: 1rem;—— 新浏览器用后者，旧浏览器降级用前者 -
inset-inline: 1rem 2rem（简写）在 Safari 14.0 以下被完全忽略，必须拆成inset-inline-start: 1rem; inset-inline-end: 2rem; - 如果父容器有
transform或contain: layout，部分 Safari 版本可能无法正确计算inset，此时退回到margin+dir判断更稳妥
真正麻烦的不是写法本身，而是方向声明的传递链——它不像 font-size 那样自然继承，漏掉任意一环，inset-inline-start 就只是个摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
