Question

我在按钮内有两个链接，但链接似乎不适用于Firefox。

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

我尝试了JavaScript onclick和重定向 - 即使这样也无效。

Answer 1

这不起作用，因为it is not allowed by HTML5：

内容模型：短语内容，但必须没有互动内容后裔。

Interactive content means any of the following elements：

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

如果它在某些浏览器中有效，那只是因为他们正在尝试使用格式错误的标记，并提供一些类型的有意义的结果。

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

Answer 2

<a> is not allowed inside <button>

短语内容，但必须没有互动内容后代。

<a>是互动内容（无论是否显示href，但您的确如此。因此，您不能依赖于将链接作为按钮的子项以及Firefox正在执行的操作是正确的。使用其他元素来包含<a> s

Answer 3

我在按钮内有两个链接但是[...]

“是的，但是让我在那里阻止你......”

http://www.w3.org/TR/html5/forms.html#the-button-element：

4.10.8按钮元素内容模型：短语内容，但必须没有interactive content后代。

---＆GT;

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

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

Answer 4

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

的onclick = “window.location.href = '/ LINK1'”

实施例

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

Answer 5

这是无效的HTML，

做这样的事情：

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

Answer 6

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

<div class="product">
<button onClick="javascript: window.location='/checkout/outfield-
banner/1'">Add to Cart</button>
</div>

Answer 7

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

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

7 个答案: