在Firefox中嵌套<a>标签在<button>标签内不起作用。

Question

我有一个包含超链接标签的<button>，看起来像这样：

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

这在Chrome和Safari中运作良好，但在Firefox（版本20已经测试）中无法工作。

问题出在哪里？

- cjmling

---

为什么你会写那样的代码？在按钮标签内使用锚点不符合HTML规范，据我所知。更好的方法似乎是直接样式化锚点标签，使其看起来像你想要的按钮样式，并完全摒弃按钮标签。 - Billy Moat

哈哈哈哈...为什么我以前没想到呢 :P，这几个月一直这样编码 :S - cjmling

是的，Bootstrap非常乐意接受所有锚标签上的“btn”类，就像我在下面的答案中展示的那样 :) - Billy Moat

除了锚点不像按钮那样可通过键盘导航。 - 2540625

将按钮包装在锚点周围会导致WHATWG和W3C验证器（html5.validator.nu和validator.w3.org）均失败。 - 2540625

可能是在Firefox中按钮内的链接无法工作的重复问题。 - 2540625

Answer 1

为使其在所有浏览器上工作，包括Firefox，您需要将其更改为：

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

或者根据Billy Moat的建议，在使用Bootstrap时不需要<button>，您可以直接执行

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

- cjmling

---

知道了，但需要提醒一下 - 在Bootstrap中使用按钮组时，第一个选项会破坏样式。 :( - Mark

@HussienK 但为什么？ - Michael J Caboose

将按钮包裹在锚点中会导致无法通过WHATWG和W3C验证器（https://html5.validator.nu/ 和 https://validator.w3.org/）。 - 2540625

锚点本身并不像按钮那样完全支持键盘导航。 - 2540625

似乎违反规则了。按钮不能嵌套在锚标签中。 参见：https://dev59.com/0Ww15IYBdhLWcg3wy-zO#6393863 - Kostas Minaidis

Answer 2

可能最好只是这样做：

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

- Billy Moat

---

除了按钮，锚点并没有像按钮那样完全支持键盘导航。 - 2540625

Answer 3

这个问题发生在FF和IE（< 10）中。

当button标签用作链接时，浏览器会出现问题。

在Bootstrap中的快速解决方案是使用<a>标签，并赋予btn btn-default类（或您选择的按钮样式）。

但是，在表单中（例如提交按钮），您可以使用<button>标签而不会有问题。

- ToTech

Answer 4

如果您无法更改HTML结构，可以简单地使用onclick方法，而不是更改HTML结构。这可能是因为某些原因不允许您进行更改（例如bootstrap组件作为列表组，这是我的情况呵呵），主要是因为您想在按钮内放置两个或多个链接：

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

- Matheus Montenegro

Answer 5

如果您正在使用WordPress的wp_loginout函数，该函数会创建一个链接以登录/注销，以便将链接嵌套在按钮中进行样式设置，例如：使用btn btn-primary，只需将标签替换为标签即可。

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

- Merlin

Answer 6

将<a>标签嵌套在<button>内部，或反之亦然，都违反了HTML规则，并且无法通过代码验证器检查：

“元素<a>不能作为<button>元素的后代出现。”

如果您想让按钮的行为像链接，或者让链接看起来像按钮，您可以使用CSS或Bootstrap来设置链接的样式，就像Billy Moat的回答所示，

或者

您可以在 button 标签中使用location.href。

<button onclick="location.href='http://www.example.com'" type="button"> www.example.com </button>

<button onclick="window.location.href='/css_page.html'">CSS page</button>

- Michael S DuWors

Answer 7

这对我来说很有效，可以保留Bootstrap btn-group的样式：

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

- Roger