a标签内嵌套标题标签时outline-style样式不生效问题咨询

问题原因 #

这不是配置遗漏导致的，是浏览器默认渲染规则的固有表现：

• <a>标签默认是display: inline行内元素，当行内元素内部嵌套块级元素（比如h1~h6标题标签）时，浏览器无法正确计算行内元素的整体渲染包围盒，因此solid/dashed/dotted这类普通线型的outline会出现渲染失效的问题。
• outline-style: auto是浏览器调用系统原生焦点样式的特殊值，绘制逻辑独立于普通outline，会自动识别元素的完整可聚焦区域，因此不受这个渲染问题影响。
• 对照测试用例里嵌套<span>（默认同样是行内元素）的a标签就能发现，不存在行内嵌套块级结构的元素，普通线型outline是可以正常渲染的。

另外测试代码存在两处标签闭合错误，虽然不是导致outline问题的直接原因，但可能引发额外的布局异常：

1. 第一个普通链接的闭合标签写错，末尾的<a>应该为</a>
2. 嵌套span的链接内部，span的闭合标签写错，末尾的<span>应该为</span>

可行解决方案 #

根据实际需求选其中一种即可：

• 方案1（推荐，支持自定义线型）：给包含块级子元素的a标签修改display属性，让浏览器可以正确计算元素轮廓的包围范围

.focus-visible-only:focus-visible {
  outline: 4px dotted darkorange;
}
/* 补充修复样式 */
a.focus-visible-only {
  display: inline-block; /* 也可以根据布局需要设置为block */
}

• 方案2（无需修改布局）：如果不想调整a标签的display属性，可以用box-shadow模拟outline效果，阴影的渲染不受行内嵌套块级结构的影响，且不会占据文档流空间

.focus-visible-only:focus-visible {
  outline: none;
  /* 模拟4px实色轮廓，如果需要dashed/dotted线型建议优先选方案1 */
  box-shadow: 0 0 0 4px darkorange;
}

• 方案3（可访问性最优）：如果不需要自定义轮廓线型，直接使用outline: auto即可，这个样式会跟随用户系统的焦点设置，对辅助技术的适配性更好。

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