outline-offset 在 IE6–IE11 全系均不支持，IE 完全未解析该属性；需用 box-shadow 回退，并注意 blur-radius: 0、兼容性及 :focus-visible 下的显式覆盖。
outline-offset 在 IE6–IE11 全系都不支持
直接说结论：outline-offset 从 IE6 到 IE11 均未实现，不是“部分不生效”，而是压根没解析这个属性。IE 的 outline 渲染机制本身就很简陋——它只支持 outline 简写和 outline-style/outline-width/outline-color，对偏移量零支持。连 Edge Legacy（IE12 前身）都直到 EdgeHTML 12 才开始支持，而 Chromium 内核的 Edge 从一开始就跟上标准。
用 box-shadow 模拟 outline-offset 的常见陷阱
多数人会想到用 box-shadow 替代，但容易忽略几个关键差异：
-
box-shadow会参与文档流外渲染，但默认不触发重排，而outline原本就不占布局空间——这点一致； - 阴影默认有模糊半径，要模拟硬边 outline 必须设
blur-radius: 0和spread-radius: Npx； - IE9+ 支持
box-shadow，但 IE8 及更早版本不支持，若需兼容 IE8，得降级为border+margin负值组合（破坏性大，慎用）； - 聚焦元素若本身有
border-radius，box-shadow会自然跟随圆角，而原生outline在所有浏览器中都是直角矩形——这点反而是优势。
示例（安全写法）：
.focusable {
outline: none;
/* IE10+ / Edge / Chrome / Firefox 都可用 */
outline-offset: 2px; /* 仅现代浏览器生效 */
/* 回退：box-shadow 模拟 offset=2px 的实线外框 */
box-shadow: 0 0 0 2px #3b97d3;
}检测是否支持 outline-offset 并动态加载回退样式
不能只靠 UA 判断 IE，因为企业环境常有兼容模式或伪 IE 标识。更可靠的方式是 CSS @supports 或 JS 特性检测：
立即学习“前端免费学习笔记（深入）”；
- CSS 层面：用
@supports (outline-offset: 2px)包裹原生规则，再在外层写通用box-shadow回退； - JS 层面：创建临时元素，设置
style.outlineOffset = '2px'后读getComputedStyle(el).outlineOffset，返回'2px'才算真正支持； - 注意：IE 中
getComputedStyle(el).outlineOffset返回空字符串或'auto'，不是'0px'，别用相等判断代替存在性判断。
focus-visible 与 outline-offset 的协同问题
现在越来越多项目用 :focus-visible 控制键盘聚焦样式，但它和 outline-offset 是正交关系——:focus-visible 不改变 outline 行为，只是选择器条件。真正容易出问题的是：当同时使用 :focus-visible 和 outline-offset 回退方案时，若未在 :focus-visible 块内重复声明 box-shadow，IE 下就会完全丢失焦点样式。
正确写法必须显式覆盖：
:focus-visible {
outline: none;
box-shadow: 0 0 0 2px #3b97d3;
}
/* 不要指望上面的通用 .focusable 规则自动继承 */这种漏写在多层组件封装时极难排查，尤其当基础 UI 库只写了 outline-offset 却没配 box-shadow 回退时。
