嵌套<a> inside <button> doesn&#39;t work in Firefox</button></a>

Question

我的<button>里面有一个超链接标记，如下所示：

<button class="btn"><a href="#"></a></button>

这在Chrome和Safari中运行良好，但在Firefox（测试版本20）中不起作用。

怎么了？

Answer 1

要使其在所有浏览器中都可以使用，Firefox也必须将其更改为

<a href="#"><button class="btn"></button></a>

或者如同Billy Moat在引导的情况下所建议的那样，你不需要<button>

<a href="#" class="btn">GO</a>

Answer 2

这样做可能更好：

<a href="#" class="btn">Go!</a>

Answer 3

此问题发生在FF和IE（＆lt; 10）中。 当浏览器用作链接时，浏览器根本不喜欢标记按钮。

bootstrap中的快速解决方案是使用并提供一类btn btn-default（或您选择的按钮样式）。

但是，您可以在表单（例如提交按钮）中使用，但您不应该有问题。

Answer 4

你可以简单地使用onclick方法而不是改变HTML结构，如果由于某些不允许你改变的东西你不能改变你的结构（例如bootstrap组件作为list-groups，那就是我的情况hehe）主要是如果你想在一个按钮内放置两个或多个链接：

<button class="btn"><a onclick="location.replace('YOUR_URL_HERE')"></a></button>

Answer 5

如果您使用 wordpress wp_loginout功能。此函数创建一个登录/注销链接，以将链接嵌套在按钮内以进行样式化，例如：使用btn btn-primary只需将<button>标记替换为<span>标记< / p>

<span class="btn btn-primary"><?php wp_loginout($_SERVER["REQUEST_URI"] ); ?></span>

Answer 6

尝试将按钮更改为跨度。对我有用。

Answer 7

这对我来说可以保留书夹btn-group样式：

<button class="btn btn-default" onclick="location.replace('YOUR_URL_HERE')">Click Me</button>