web-dev-qa-db-ja.com

Firefoxで機能しないボタン内のリンク

ボタン内に2つのリンクがありますが、Firefoxではリンクが機能しないようです。

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

JavaScript onclickとリダイレクトを試してみました-それでも動作しません。

javascripthtmlfirefoxbuttonhyperlink
33
Stacy J

HTML5では許可されていない であるため、これは機能しません。

コンテンツモデル：フレージングコンテンツですが、インタラクティブなコンテンツの子孫があってはなりません。

インタラクティブコンテンツは以下の要素のいずれかを意味します ：

オーディオ（controls属性が存在する場合）ボタンの詳細埋め込みiframe img（usemap属性が存在する場合）入力（type属性が非表示状態でない場合）keygenラベルメニュー（type属性がツールバー状態にある場合）オブジェクト（usemap属性が存在する場合）textareaビデオを選択（controls属性が存在する場合）

一部のブラウザで動作するのは、不正なマークアップでニースを再生し、some種類の意味のある結果を提供しようとしているからです。

言い換えれば、HTMLを書き換えると、混乱になります。リンクがボタンのように見えるようにするには、意味的に間違った要素を乱用するのではなく、リンクをdiv要素とスタイルに配置します。

57
Niels Keurentjes

<a>は<button>内では使用できません

コンテンツをフレージングしますが、インタラクティブなコンテンツの子孫があってはなりません。

<a>はインタラクティブなコンテンツです（明らかにhrefを持っているかどうかに関係なく、あなたのものは持っています）。したがって、ボタンの子としてリンクを持つことに依存することはできず、Firefoxが行っていることは正しいです。別の要素を使用して<a>sを含める

12
Explosion Pills

ボタン内に2つのリンクがありますが、[…]

「うん、でも止めさせて…」

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

4.10.8ボタン要素コンテンツモデル：コンテンツのフレージング。ただし、 インタラクティブコンテンツ 子孫があってはなりません。

--->

インタラクティブコンテンツは、ユーザーとの対話を特に目的としたコンテンツです。 ⇒a、音声[…]

したがって、無効なHTMLを記述している場合は、予期しない動作が予想されます;-)

6
CBroe

これをボタン要素に追加できます。

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

例

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

4
Jeff Zeller

それは無効なHTMLです。

代わりに次のようなことをしてください。

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