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

Jul*_*n A 4 html google-chrome

我试图在<summary>元素中放置一些链接,如果<a>标签除了图标之外不包含任何内容<i>,则它不起作用(单击它只会打开元素<details>\xe2\x80\xa6)。

\n\n

我的代码:

\n\n

\r\n
\r\n
<!doctype html>\r\n<html>\r\n\r\n<head>\r\n  <meta charset="utf-8">\r\n  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">\r\n</head>\r\n\r\n<body>\r\n  <details>\r\n    <summary>\r\n      <span>Foo</span>\r\n      <span><a href="http://www.google.com">text link</a></span>\r\n      <span><a href="http://www.google.com"><i class="material-icons">send</i></a></span>\r\n    </summary>\r\n    <span>Bar</span>\r\n  </details>\r\n</body>\r\n\r\n</html>
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n

\n\n

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

\n\n

我尝试使用材质图标以外的其他图标,但没有结果\xe2\x80\xa6

\n\n

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

\n

Phi*_*hun 5

这是我的解决方法:

summary a * {
  pointer-events: none;
}
Run Code Online (Sandbox Code Playgroud)

这使得点击直接在链接上调度,而不是在内部元素上