我在一个按钮中有两个链接，但这些链接在 Firefox 上似乎不起作用。
<button class="btn login">
<a href="/login"><b>Log In</b></a>
|
<a href="/signup"><b>Sign Up</b></a>
</button>
我尝试了 JavaScript onclick 和重定向 - 即使这样也不起作用。
按钮内的链接在 Firefox 中不起作用
IT技术
javascript
html
firefox
button
hyperlink
2021-02-05 07:27:26
6个回答
这不起作用，因为HTML5 不允许这样做：
内容模型：短语内容，但不得有交互式内容后代。
一个音频（如果控件属性存在）按钮详细信息嵌入 iframe img（如果存在 usemap 属性）输入（如果类型属性不处于隐藏状态）keygen 标签菜单（如果类型属性处于工具栏状态）对象（如果存在 usemap 属性）选择 textarea 视频（如果存在控件属性）
如果是在一些浏览器的工作，它只是因为他们正试图发挥好与畸形的标记，并提供了一些类型的有意义的结果的。
换句话说：重写你的 HTML，这是一团糟。如果您希望链接看起来像是在按钮中，请将它们放在一个div元素和样式中，使其看起来像一个元素，而不是滥用语义错误的元素。
短语内容，但不得有交互式内容后代。
<a>是交互式内容（无论它是否有href明显的内容，但您有）。因此，您不能依赖于将链接作为按钮的子项，而 Firefox 正在做的事情是正确的。使用另一个元素来包含<a>s
我在一个按钮中有两个链接，但是 [...]
“是的，但让我在那里阻止你……”
http://www.w3.org/TR/html5/forms.html#the-button-element：
4.10.8 按钮元素内容模型：短语内容，但不得有交互内容的后代。
--->
交互式内容是专门用于用户交互的内容。⇒ a, 音频 […]
因此，如果您正在编写无效的 HTML，请期待意外行为 ;-)
您可以将其添加到按钮元素中。
onclick="window.location.href='/link1'"
例子
<button onclick="window.location.href='/login'">Login</button>
那是无效的 HTML，
做这样的事情：
<ul>
<li><a href="#">Log in</a></li>
<li><a href="#">Sign up</a></li>
</ul>