ie和edge≤15完全不解析:focus-within,整条css规则被静默丢弃;edge 16–18虽识别但存在input[type="search"]+overflow:hidden不触发等缺陷,必须用focusin/focusout事件配合settimeout和classlist模拟,并重写css为class选择器。

IE 和 Edge ≤15 根本不解析 :focus-within 语法
不是“不生效”,而是浏览器压根不认识这个伪类——整条 CSS 规则被静默丢弃。开发者工具里连 :focus-within 选项都不会出现,@supports (selector(:focus-within)) 也无效,因为旧 Edge 连 selector() 函数都不支持。
Edge 16–18 支持有限,但仍有关键缺陷
Edge 16 开始识别该伪类,但到 Edge 18 仍存在不可靠行为:比如 input[type="search"] 在 overflow: hidden 父容器中可能完全不触发;嵌套容器焦点传递偶尔中断;contenteditable 元素响应滞后或丢失。这些不是配置问题,是渲染引擎层面未完成实现。
必须用 focusin/focusout 模拟,且不能只监听 focus
focus 事件不冒泡,绑在父容器上收不到子元素聚焦信号;focusin 才能冒泡委托,是唯一可行入口。但仅加 focusin 不够,漏掉以下任一环节都会出错:
- 用
focusout(不是blur)移除状态,否则同级表单组切换时 class 残留 - 必须用
setTimeout延迟判断document.activeElement,否则focusout触发时它还是null - CSS 必须重写为
.form-group.focus-within label,保留原生.form-group:focus-within label并存,不能删
移动端 Safari 15.4–16.3 有独立 bug,JS fallback 必须无条件启用
哪怕你只支持现代浏览器,这个版本段的 Safari 对 input[type="search"] + overflow: hidden 组合会直接跳过 :focus-within 匹配。此时 JS 模拟不是“可选降级”,而是强制路径——而且要确保监听到 input 内部的搜索按钮点击(它可能触发 focus 但不冒泡),这点容易被忽略。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











