html - 链接不适用于 <summary> 元素中的图标

标签 html google-chrome

我正在尝试将一些链接放在 <summary> 中元素,如果 <a>标签只包含一个图标 <i> ,它不起作用(点击它只会打开 <details> 元素……)。

我的代码:

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

<body>
  <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></a></span>
    </summary>
    <span>Bar</span>
  </details>
</body>

</html>

有人会知道我错过了什么吗?

我尝试了 Material 图标以外的其他图标,但没有结果……

编辑:这是一个 Chrome 错误(它与 Firefox 一起工作):有人知道解决方法吗?

最佳答案

这是我的解决方法:

summary a * {
  pointer-events: none;
}

这使得点击直接发送到链接而不是内部元素

关于html - 链接不适用于 <summary> 元素中的图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48538675/

相关文章:

html - 如何删除 MathJax 中数学的顶部/底部填充?

javascript - Chrome 扩展程序 - 单击扩展程序、新选项卡和重定向

javascript - 修复 Chrome 的选项元素 onclick 事件

macos - Chrome渲染颜色怪异

css - Chrome v32 下拉底部元素高亮问题

html - Firefox 中的图像缩放问题

javascript - 无法看到我动态创建的表单 javascript

html - 使用 css 在文章中放置图像时遇到问题

javascript - HTML5 音频,独立的左右声道

google-chrome - xsl :import and xsl:include in stylesheets don't work on Google Chrome