Html 在 <button> 中嵌套 <a> 在 Firefox 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16280684/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Nesting <a> inside <button> doesn't work in Firefox
提问by cjmling
I have a <button>with a hyperlink tag inside, looks like this:
我有一个<button>里面有一个超链接标签，看起来像这样：
<button class="btn"><a href="#"></a></button>
This works well in Chrome and Safari, BUT doesn't work in Firefox (ver 20 tested).
这在 Chrome 和 Safari 中运行良好，但在 Firefox 中不起作用（经过 20 版测试）。
What's wrong?
怎么了？
回答by cjmling
To make it work in all browser, Firefox too you have to change it to
要使其在所有浏览器中运行，Firefox 也必须将其更改为
<a href="#"><button class="btn"></button></a>
or as suggested by Billy Moat in case of bootstrap there was no need of <button>you could just do
或者按照 Billy Moat 的建议，在 bootstrap 的情况下，<button>你不需要你就可以做
<a href="#" class="btn">GO</a>
回答by Billy Moat
Probably better to just do this:
最好这样做：
<a href="#" class="btn">Go!</a>
回答by ToTech
This issue is happening in FF and IE(< 10). The browser simply doesn't like the tag button when it's used as a link.
这个问题发生在 FF 和 IE(< 10) 中。当标签按钮用作链接时，浏览器根本不喜欢它。
Quick solution in bootstrap is to use and give a class of btn btn-default (or your choice of button style).
bootstrap 中的快速解决方案是使用并提供一类 btn btn-default（或您选择的按钮样式）。
However, you can use in a form (submit button for instance) and you shouldn't have an issue.
但是，您可以在表单中使用（例如提交按钮），您应该没有问题。
回答by Matheus Montenegro
You can simply use an onclick method instead of changing the HTML structure, if you can't change your structure because of something that doesn't allow you to change(e.g. bootstrap components as list-groups, that's my case hehe) and mainly if you want to put two or more links inside a button:
您可以简单地使用 onclick 方法而不是更改 HTML 结构，如果您因为某些不允许您更改的内容而无法更改您的结构（例如引导程序组件作为列表组，这是我的情况呵呵），主要是如果您想在一个按钮内放置两个或多个链接：
<button class="btn"><a onclick="location.replace('YOUR_URL_HERE')"></a></button>
回答by Merlin
In case you are using wordpresswp_loginoutfunction. This function create a link for login/logout to nest the link inside a button for styling eg: using btnbtn-primaryjust replace the <button>tag it with a <span>tag
如果您使用的是wordpresswp_loginout功能。此函数创建一个用于登录/注销的链接，将链接嵌套在按钮内以进行样式设置，例如：使用btnbtn-primary只需将<button>标签替换为<span>标签
<span class="btn btn-primary"><?php wp_loginout($_SERVER["REQUEST_URI"] ); ?></span>
回答by Roger
This worked for me to retain bookstrap btn-group stylings:
这对我保留书带 btn-group 样式很有用：
<button class="btn btn-default" onclick="location.replace('YOUR_URL_HERE')">Click Me</button>
