web-dev-qa-db-ja.com

Firefoxで<button>内に<a>をネストできない

<button>内部にハイパーリンクタグがある場合、次のようになります。

<button class="btn"><a href="#"></a></button>

これは、ChromeおよびSafariでうまく機能しますが、Firefoxでは機能しません（ver 20テスト済み）。

どうしましたか？

htmlfirefox
54
cjmling

すべてのブラウザで動作させるには、Firefoxも変更する必要があります

<a href="#"><button class="btn"></button></a>

またはbootstrapの場合に<button>あなたはただできる

<a href="#" class="btn">GO</a>
54
cjmling

おそらくこれを行う方が良いでしょう：

<a href="#" class="btn">Go!</a>
19
Billy Moat

この問題は、FFおよびIE（<10）で発生しています。ブラウザは、リンクとして使用されるタグボタンを単純に嫌います。

bootstrap=の簡単な解決策は、btn btn-default（またはボタンスタイルの選択）のクラスを使用して指定することです。

ただし、フォーム（たとえば、送信ボタン）で使用することができ、問題はないはずです。

3
ToTech

HTML構造を変更する代わりに、onclickメソッドを使用できます。変更できないもののために構造を変更できない場合（例bootstrapコンポーネントをリストグループとして、それは私の場合ですhehe）および主にボタン内に2つ以上のリンクを配置する場合：

<button class="btn"><a onclick="location.replace('YOUR_URL_HERE')"></a></button>
1
Matheus Montenegro

ボタンをスパンに変更してみてください。それは私のために働く。

0
user10364072

これは私に本棚btnグループのスタイルを保持するために働いた：

<button class="btn btn-default" onclick="location.replace('YOUR_URL_HERE')">Click Me</button>
0
Roger