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

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

这不起作用,因为HTML5不允许这样做:

内容模型:短语内容,但必须没有互动内容后代.

交互式内容表示以下任何元素:

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

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

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

Answer 2

<a> 不允许在里面 <button>

短语内容,但必须没有互动内容后代.

<a>是交互式内容(无论它是否有href明显的,但你的确如此).因此,您不能依赖于将链接作为按钮的子项以及Firefox正在执行的操作是正确的.使用另一个元素来包含<a>s

Answer 3

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

"是的,但是让我在那里阻止你......"

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

4.10.8按钮元素内容模型:Phrasing内容,但必须没有交互式内容后代.

--->

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

因此,如果您正在编写无效的HTML,则会出现意外行为;-)