<summary>元素内仅含图标的<a>标签链接失效问题求助

这个问题确实是Chrome的已知行为差异（Firefox处理逻辑更符合预期），核心原因是Chrome会将<summary>内部仅包含图标的<a>标签的点击事件优先冒泡给<summary>，从而触发详情的展开/折叠，而不是执行链接跳转。下面给你几个可靠的解决办法：

方法1：阻止事件冒泡（推荐） #

给图标所在的<a>标签添加onclick事件，手动阻止事件向上冒泡到<summary>，这样点击图标时就会优先触发链接跳转：

<details>
  <summary>
    <span>Foo</span>
    <span><a href="http://www.google.com">text link</a></span>
    <span><a href="http://www.google.com" onclick="event.stopPropagation();">
      <i class="material-icons">send</i>
    </a></span>
  </summary>
  <span>Bar</span>
</details>

方法2：给链接添加不可见的占位内容 #

在<a>标签内添加一个不可见的空元素（比如透明的<span>），让Chrome识别到链接有“实质性内容”，从而正确处理点击事件：

<details>
  <summary>
    <span>Foo</span>
    <span><a href="http://www.google.com">text link</a></span>
    <span><a href="http://www.google.com">
      <i class="material-icons">send</i>
      <span style="display: inline-block; width: 0; height: 0; overflow: hidden;"></span>
    </a></span>
  </summary>
  <span>Bar</span>
</details>

这种方法不需要JS，适合不想引入脚本的场景，空元素不会影响布局。

方法3：调整链接的显示属性 #

通过CSS将<a>标签设置为inline-block，改变元素的渲染层级，让Chrome正确识别其点击区域：

summary a {
  display: inline-block;
}

对应的HTML保持不变即可，这种方法也无需JS，但需要确保样式不会影响你的布局。

补充说明 #

Chrome的这种行为本质上是对<summary>元素的点击事件捕获逻辑差异，当链接内只有纯内联图标时，浏览器误将点击判定为对<summary>的交互，上述方法都是通过改变事件传递或元素识别方式来规避这个问题。

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