IE浏览器中锚点内容焦点轮廓显示异常问题排查请求

我之前也碰到过IE里锚点元素焦点样式跑偏的问题，这种情况大多是IE对:focus状态的默认样式处理和Chrome、Firefox不一致导致的，给你几个亲测有效的解决思路：

1. 重置并自定义焦点样式 #

IE自带的锚点焦点虚线样式本来就比较“顽固”，位置和形态都不符合预期，我们可以直接覆盖它：

a:focus {
  /* 先去掉IE默认的虚线轮廓 */
  outline: none;
  /* 用box-shadow模拟其他浏览器的环绕式焦点，兼容性更好 */
  box-shadow: 0 0 0 2px #007bff;
  /* 如果更倾向用outline，也可以这么写，记得设置偏移量 */
  /* outline: 2px solid #007bff; */
  /* outline-offset: 0; */
}

2. 统一元素的盒模型 #

有时候焦点偏移是因为元素的盒模型计算方式不同，给锚点元素加上box-sizing: border-box，确保内边距和边框不会撑开元素的实际宽度，让焦点能准确贴合元素：

a {
  box-sizing: border-box;
  /* 如果你的锚点是纯行内元素，改成inline-block会让焦点更稳定 */
  display: inline-block;
  /* 可以根据实际需求添加内边距，让焦点区域更合理 */
  padding: 0.4rem 0.8rem;
}

3. 检查父元素的布局影响 #

如果上面的方法还没解决，看看锚点的父元素有没有设置overflow、position这类属性，IE有时候会因为父元素的布局规则，把焦点轮廓“挤”到元素外面，调整父元素的相关样式试试。

需要注意的是，焦点样式是无障碍访问的重要部分，绝对不能只去掉默认样式而不替换成自定义样式，不然键盘导航的用户会找不到当前焦点位置。

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