我在一个按钮中有两个链接，但这些链接似乎在 Firefox 上不起作用。
<button class="btn login">
<a href="/login"><b>Log In</b></a>
|
<a href="/signup"><b>Sign Up</b></a>
</button>
我尝试了 JavaScript onclick 和重定向 - 即使这样也不起作用。
【问题讨论】：
标签： javascript html firefox button hyperlink
这不起作用，因为it is not allowed by HTML5:
内容模型：短语内容，但必须没有互动 内容后代。
Interactive content means any of the following elements:
音频（如果存在控件属性）按钮详细信息嵌入 iframe img（如果存在 usemap 属性）输入（如果类型 属性未处于隐藏状态）keygen标签菜单（如果类型 属性处于工具栏状态）对象（如果 usemap 属性是 present) 选择 textarea 视频（如果存在 controls 属性）
如果它在某些浏览器中确实有效，那只是因为它们试图 处理格式错误的标记并提供一些有意义的结果。
换句话说：重写你的 HTML，它是一团糟。如果您希望链接看起来像在按钮中，请将它们放在 div 元素中，并将其样式设置为看起来像一个，而不是滥用语义错误的元素。
【讨论】：
<a> is not allowed inside <button>
短语内容，但不得有交互式内容后代。
<a> 是交互式内容（不管它是否有 href 显然，但你有）。因此，您不能依赖将链接作为按钮的子级，并且 Firefox 所做的事情是正确的。使用另一个元素来包含<a>s
【讨论】：
我在一个按钮中有两个链接，但是 […]
“是的，但是让我阻止你……”
http://www.w3.org/TR/html5/forms.html#the-button-element:
4.10.8 按钮元素内容模型：分句内容，但不能有interactive content后代。
--->
交互式内容是专门用于用户交互的内容。 ⇒ 一个，音频 […]
因此，如果您正在编写无效的 HTML，预计会出现意外行为 ;-)
【讨论】：
这是无效的 HTML，
改为这样做：
<ul>
<li><a href="#">Log in</a></li>
<li><a href="#">Sign up</a></li>
</ul>
【讨论】：
您可以在按钮元素中添加它。
onclick="window.location.href='/link1'"
例子
<button onclick="window.location.href='/login'">Login</button>
【讨论】：
或者，您可以将按钮放在锚点内，它不会具有完全相同的外观，因为它将是两个不同的按钮，但它将是一个充当链接的按钮。它在技术上仍然不正确，但它确实在 FireFox 中工作。
<a href="/login">
<button class="btn login">
<b>Log In</b>
</button>
</a>
<a href="/signup">
<button class="btn login">
<b>Sign Up</b>
</button>
</a>
【讨论】：
使用 javascript: window.location 作为按钮。
<div class="product">
<button onClick="javascript: window.location='/checkout/outfield-
banner/1'">Add to Cart</button>
</div>
【讨论】：