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

Link inside a button not working in Firefox

提问by Stacy J

I have two links inside a button but the links don't seem to work on Firefox.

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

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

I tried JavaScript onclick and redirecting - even that is not working.

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

回答by Niels Keurentjes

This doesn't work because it is not allowed by HTML5:

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

Content model:Phrasing content, but there must be no interactive content descendant.

内容模型：短语内容，但必须没有交互式内容后代。

Interactive content means any of the following elements:

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

a audio (if the controls attribute is present) button details embed iframe img (if the usemap attribute is present) input (if the type attribute is not in the hidden state) keygen label menu (if the type attribute is in the toolbar state) object (if the usemap attribute is present) select textarea video (if the controls attribute is present)

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

If it does work in some browsers it's just because they're trying to play nice with malformed markup and provide somesort of meaningful result.

如果是在一些浏览器的工作，它只是因为他们正试图发挥好与畸形的标记，并提供了一些类型的有意义的结果的。

In other words: rewrite your HTML, it's a mess. If you want the links to look like they're in a button, put them in a divelement and style that to look like one, instead of abusing semantically wrong elements for it.

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

回答by Explosion Pills

<a>is not allowed inside <button>

<a>不允许进入 <button>

Phrasing content, but there must be no interactive content descendant.

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

<a>is interactive content (regardless of whether it has an hrefapparently, but yours do). Thus you can't depend on having the links as children of the button and what Firefox is doing is correct. Use another element to contain the <a>s

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

回答by CBroe

I have two links inside a button but […]

我在一个按钮中有两个链接，但是 […]

“Yeah, but let me stop you right there …”

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

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

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

4.10.8 The button element Content model: Phrasing content, but there must be no interactive contentdescendant.

--->

Interactive content is content that is specifically intended for user interaction. ? a, audio […]

4.10.8 按钮元素内容模型：短语内容，但不得有交互内容的后代。

--->

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

So, if you are writing invalid HTML, expect unexpected behavior ;-)

因此，如果您正在编写无效的 HTML，请期待意外行为 ;-)

回答by Jeff Zeller

You can add this in the button element.

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

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

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

Example

例子

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

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

回答by Nick R

That's invalid HTML,

那是无效的 HTML，

Do something like this instead:

做这样的事情：

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

回答by shanthan

Use javascript: window.location for the button.

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

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

回答by Scott N.

Or, you can put the button inside the anchor, it won't have the exact same look since it'll be two different buttons, but it will be a button that acts as a link. It's still not technically correct but it doeswork in FireFox.

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