如何为仅用键盘的用户在IE11中高亮<div role="button">元素？

这个问题在IE11里挺常见的——它对非原生交互元素（比如设置了tabindex="0"的div）的焦点样式处理逻辑和Chrome、Firefox不一样，默认不会显示焦点环，甚至普通的:focus伪类样式也可能因为浏览器的默认行为被忽略。我给你几个靠谱的解决办法：

1. 先排查全局样式的干扰 #

首先检查你的CSS里有没有全局重置焦点样式的代码，比如：

*:focus {
  outline: none;
}

如果有这种代码，会直接覆盖掉所有元素的默认焦点样式，包括你这个自定义按钮。解决办法是给.collapsable单独设置明确的焦点样式，优先级要高于全局重置。

2. 显式定义:focus伪类样式 #

给你的.collapsable元素添加清晰的焦点样式，比如用outline或者box-shadow，确保样式足够明显：

.collapsable:focus {
  /* 用outline实现类似原生的焦点环 */
  outline: 2px solid #0078d7;
  outline-offset: 2px;
  /* 或者用box-shadow实现更灵活的样式 */
  /* box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0078d7; */
}

这个样式在Chrome、Firefox里会正常生效，同时也能被IE11识别，但有时候IE11还是会有特殊情况，所以需要下一步的专属处理。

3. 针对IE11使用::-ms-focus-ring伪元素 #

IE11提供了一个专属的伪元素::-ms-focus-ring，用来控制焦点环的样式。你可以用它来覆盖IE的默认行为，确保焦点提示显示：

/* IE11专属：先清除默认焦点环，再自定义样式 */
.collapsable::-ms-focus-ring {
  outline: none;
  border: 2px solid #0078d7;
  /* 可以根据需要调整间距 */
  margin: 2px;
}

这个伪元素只会在IE11中生效，不会影响其他浏览器。

额外注意事项 #

• 测试的时候一定要用键盘Tab键导航来触发焦点，而不是点击元素——IE11中点击自定义元素可能不会触发:focus状态（但Tab导航一定会）。
• 焦点样式要符合无障碍标准（WCAG），确保颜色对比度足够，让视觉障碍用户能清晰识别焦点位置。

内容的提问来源于stack exchange，提问作者seal