IE6–8中button虚线框需用hidefocus属性解决,outline:none在IE6–7无效;兼容方案为HTML加hidefocus+CSS outline:none及::-moz-focus-inner清除。

IE 6–8 中点击 button 或 input[type=button] 后残留的虚线框,本质是:focus状态下的默认 outline,不能靠 border: none 解决,必须针对性处理。
IE 6–8 必须用 hidefocus 属性
这是 IE 专有属性,仅在 IE 6–8 生效,现代 IE/Edge 已废弃但旧项目仍常见。它不是 CSS 属性,而是 HTML 元素上的布尔属性:
-
hidefocus="true"或简写为hidefocus都可生效 - 必须加在元素标签上,如:
<button hidefocus>提交</button> - 仅对当前元素生效,无法通过 CSS 统一控制,需逐个添加
- 不支持伪类或 JS 动态设置(
el.setAttribute('hidefocus', 'true')在 IE6–7 失效)
outline: none 在 IE6–7 完全无效
IE6–7 不识别 outline,写了也白写。即使配合 :focus 伪类,比如 button:focus { outline: none; },依然无效。
- IE8 开始支持
outline,但仅限标准模式(需正确 DOCTYPE) - 若页面触发怪异模式(Quirks Mode),IE8 也会退化为不支持
outline - 不要试图用
*:focus { outline: none; }覆盖——IE6–7 既不支持通配符:focus,也不支持 outline
兼容方案:CSS + 属性双保险
针对需要同时支持 IE6–8 和现代浏览器的场景,推荐组合写法:
立即学习“前端免费学习笔记(深入)”;
- HTML 层面:所有
button、input[type=button]、input[type=submit]加hidefocus - CSS 层面:写两段规则,覆盖不同浏览器:
a, button, input[type=button], input[type=submit] { outline: none; } ::-moz-focus-inner { border: 0; } - 注意:
::-moz-focus-inner是 Firefox 特有伪元素,用于清除button和input[type=button]内部默认边框,不作用于 IE - 避免使用
expression或behavior:IE 的 CSS 表达式已废弃,性能差且在 IE8+ 标准模式下被禁用
真正容易被忽略的是:IE6–7 下,即使加了 hidefocus,如果元素被 JS focus() 过,虚线框仍可能重现——这时得搭配 onfocus="this.blur()",但要小心破坏键盘导航可用性。



















