IE全系、Edge≤18、Safari≤15.4、Firefox≤89明确不支持outline-offset，因渲染引擎未实现该属性；Chrome从1开始支持，Safari直至16.0才稳定支持。
outline-offset 在 IE 和旧版 Edge（≤18）、Safari ≤15.4、Firefox ≤89 中确实不被支持，且部分浏览器即使声明了也完全忽略该属性。这不是写法问题，而是底层渲染引擎未实现。
哪些浏览器明确不支持 outline-offset
直接查 caniuse 数据：IE 全系（包括 IE11）、Edge ≤18、Safari ≤15.4（macOS Monterey 及更早）、Firefox ≤89。Chrome 从 1 开始就支持，但 Safari 直到 16.0（2022 年底）才真正稳定支持——此前即使有部分版本“识别”该属性，offset 值也会被静默丢弃。
常见错误现象：outline-offset: 2px 写了但焦点 outline 紧贴元素边缘，毫无偏移；开发者工具里该属性显示为“已禁用”或灰色 strikethrough。
用 outline + padding 模拟 offset 的实际写法
核心思路是：放弃 outline，改用 border 或 box-shadow 实现可精确控制的“外描边”，再通过 padding 预留空间。这比 hack outline 更可靠。
立即学习“前端免费学习笔记（深入）”；
- 对可聚焦元素（如
button、a、input），用box-shadow: 0 0 0 2px #3b97d3替代outline: 2px solid #3b97d3，再加padding: 2px防止内容被 shadow 覆盖 - 若需保留原生
outline的“仅聚焦时显示”行为，用:focus-visible触发box-shadow，避免键盘导航用户丢失焦点提示 - 注意
box-shadow的扩散半径（第四个值）和padding数值必须一致，否则视觉偏移量不准
为什么不用 margin 或负 outline 来 hack
有人试过给元素加 margin: -2px 想“拉远” outline，但无效：outline 不参与盒模型，margin 不影响其绘制位置；也有尝试 outline: 2px solid #000; outline-offset: -2px，结果在旧浏览器中直接回退成紧贴边缘的 outline，甚至触发重绘异常。
关键原因：outline-offset 是独立于盒模型的绘制层偏移，旧引擎压根没有这个绘制阶段。强行用布局属性模拟，只会引入新问题：
-
margin会破坏原有布局流，影响相邻元素 -
transform: translate()无法作用于 outline 本身 - JavaScript 动态读取
getComputedStyle(el).outlineOffset在不支持浏览器中返回空字符串，无法做降级判断
真正要兼容旧浏览器，就得接受 outline 机制的局限性：它本就是个简陋的、非标准盒模型的焦点标记工具。能稳定控制偏移的唯一路径，是绕过 outline，用 box-shadow 或 border + padding 构建视觉等效物。别在 outline-offset 上浪费条件判断逻辑——它在目标环境里根本不存在。
