Javascript 按钮内的链接在Firefox中不起作用

我在一个按钮内有两个链接，但这些链接在Firefox上似乎不起作用

<button class="btn login">
    <a href="/login"><b>Log In</b></a> 
          | 
<a href="/signup"><b>Sign Up</b></a>
</button>

| 

我尝试了JavaScript onclick和重定向-即使这样也不起作用。

这不起作用，因为：

内容模型：措辞内容，但不能有交互 内容后代

:

音频（如果存在控件属性）按钮详细信息嵌入 iframe img（如果存在usemap属性）输入（如果 属性不处于隐藏状态）keygen标签菜单（如果 属性处于工具栏状态）对象（如果usemap属性为 显示）选择文本区域视频（如果控件属性存在）

如果它在某些浏览器中确实有效，那只是因为他们试图 善用格式错误的标记，并提供某种有意义的结果

换句话说：重写你的HTML，它是一团混乱。如果你想让链接看起来像是在一个按钮中，那么把它们放在一个

div

元素中，并使其看起来像一个，而不是滥用语义错误的元素。

语法内容，但不能有交互内容后代

是交互式内容（不管它是否有

href

显然，但你有）。因此，您不能依赖于将链接作为按钮的子项，Firefox的做法是正确的。使用另一个元素来包含

s

我有两个按钮内的链接，但[…]

“是的，但让我在这里阻止你……”

:

4.10.8按钮元素内容模型：语法内容，但不能有后代

--->

交互式内容是专门用于用户交互的内容。 ⇒ a、 音频[…]

因此，如果您正在编写无效的HTML，则会出现意外行为；-）

这是无效的HTML

改为这样做：

<ul>
    <li><a href="#">Log in</a></li>
    <li><a href="#">Sign up</a></li>
</ul>

您可以将其添加到按钮元素中

onclick=“window.location.href=”/link1“

范例

---

登录

或者，您可以将按钮放在锚点内，它不会有完全相同的外观，因为它将是两个不同的按钮，但它将是一个用作链接的按钮。它在技术上仍然不正确，但在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>

添加到购物车

否-其他元素中不能包含“交互式”元素。有时它可能在某些浏览器中工作，但它是错误的。可能与+1重复：我会用“期待意外”来结束这句话（可能会详细解释）可能是通过解释s何时和为什么从支持图像和文本（以及链接）的type=按钮的s变成替代品从内部到HTML 5更改以前有效的内容？@deji这是不正确的-不允许交互式内容。文本和图像不是交互式的。