按钮内的链接在 Firefox 中不起作用 [英] Link inside a button not working in Firefox

问题描述

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

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

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

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

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

推荐答案

这不起作用，因为 HTML5 不允许:

内容模型:短语内容，但不得有互动内容后代.

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

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

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

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)

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

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

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

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 div element and style that to look like one, instead of abusing semantically wrong elements for it.

这篇关于按钮内的链接在 Firefox 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！