< summary>中的链接不适用于图标元素 [英] Link not working on icon in a <summary> element
问题描述
我正在尝试在< summary> 元素中放置一些链接，并且如果< a> 标记除了图标之外不包含任何内容< i> ，它不起作用(单击它只是打开< details> 元素…).
I'm trying to put some links in a <summary> element, and if the <a> tag doesn't contain anything but an icon <i>, it's not working (a click on it just opens the <details> element…).
我的代码:
<!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>有人会知道我想念什么吗?
Anybody would know what am I missing?
我尝试了其他图标，而不是素材"图标，但没有结果……
I tried with other icons than the Material ones without results…
编辑:这是一个Chrome错误(与Firefox兼容):有人知道解决方法吗?
Edit: It's a Chrome bug (it's working with Firefox): anybody knows a workaround?
推荐答案
如果我没记错的话，您的问题是单击< i> 元素时，它会打开< details> 而不是转到您的链接.如果您在< i> 内编写< a> ，那么它将起作用.
If I'm not mistaken your problem is when you click on <i> element it opens <details> instead of going to your link. If you write <a> inside <i> then it works.
通知:由于某些原因，它不会从SO中的代码段进行重定向.但是，当我将这种和平的代码复制到html文件中并对其进行测试时，它在chrome中也可以正常工作.
Notice For some reasons it don't redirect from code snippet in SO. But when I copy this peace of code in a html file and test it, it works fine in chrome either.
<!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><i class="material-icons"><a href="http://www.google.com" style="text-decoration:none;">send</a></i></span>
</summary>
<span>Bar</span>
</details>
</body>
</html>这篇关于< summary>中的链接不适用于图标元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
