35

我在一个按钮中有两个链接，但这些链接似乎不适用于 Firefox。

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

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

4

7 回答 7

59

这不起作用，因为HTML5 不允许这样做：

内容模型：短语内容，但不能有交互式内容后代。

交互式内容是指以下任何元素：

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

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

换句话说：重写你的 HTML，这是一团糟。如果您希望链接看起来像在一个按钮中，请将它们放在一个div看起来像一个的元素和样式中，而不是滥用语义错误的元素。

于 2013-06-22T17:33:33.847 回答
12

<a>不允许进入<button>

短语内容，但不得有交互式内容后代。

<a>是交互式内容（不管它是否有href明显的，但你的）。因此，您不能依赖将链接作为按钮的子级，并且 Firefox 所做的事情是正确的。使用另一个元素来包含<a>s

于 2013-06-22T17:34:10.397 回答
6
于 2013-06-22T17:35:41.380 回答
4

您可以在按钮元素中添加它。

onclick="window.location.href='/link1'"

例子

<button onclick="window.location.href='/login'">Login</button>

于 2015-12-13T05:03:47.243 回答
0

那是无效的 HTML，

改为执行以下操作：

<ul>
    <li><a href="#">Log in</a></li>
    <li><a href="#">Sign up</a></li>
</ul>
于 2013-06-22T17:39:26.827 回答
-1

使用 javascript: window.location 作为按钮。

<div class="product">
<button onClick="javascript: window.location='/checkout/outfield-
banner/1'">Add to Cart</button>
</div>
于 2017-11-18T06:40:37.247 回答
-2

或者，您可以将按钮放在锚点内，它不会具有完全相同的外观，因为它将是两个不同的按钮，但它将是一个充当链接的按钮。它在技术上仍然不正确，但在 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>
于 2017-03-10T00:02:38.403 回答