web-dev-qa-db-ja.com

アンカーリンク内のボタンはFirefoxで機能しますが、Internet Explorerでは機能しませんか？

私のサイトの他のすべては、私のリンクを除くすべてのブラウザと互換性があるようです。ページに表示されますが、機能しません。リンクの私のコードは次のとおりです-

<td bgcolor="#ffffff" height="370" valign="top" width="165">
    <p>
        <a href="sc3.html">
            <button style="width:120;height:25">Super Chem #3</button>
        </a> 
        <a href="91hollywood.html">
            <button style="width:120;height:25">91 Hollywood</button>
        </a> 
        <a href="sbubba.html">
            <button style="width:120;height:25">Super Bubba</button>
        </a> 
        <a href="afgoohash.html">
            <button style="width:120;height:25">Afgoo Hash</button>
        </a> 
        <a href="superjack.html">
            <button style="width:120;height:25">Super Jack</button>
        </a> 
        <a href="sog.html">
            <button style="width:120;height:25">Sugar OG</button>
        </a> 
        <a href="91pk91.html">
            <button style="width:120;height:25">91 x PK</button>
        </a> 
        <a href="jedi1.html">
            <button style="width:120;height:25">Jedi</button>
        </a>
    </p>
    <p>&nbsp;</p>
    <a href="http://indynile99.blogspot.com">
        <button style="width:120;height:25">Blog</button>
    </a>
    <p>&nbsp;</p>
</td>
htmlinternet-explorerfirefoxbuttoncross-browser
71
Jason

<button>要素内に<a>を含めることはできません。 W3のコンテンツモデルの説明<a>要素の状態：

「インタラクティブなコンテンツの子孫があってはなりません。」

（a <button> は考慮されます インタラクティブコンテンツ ）

探している効果を得るには、<a>タグを捨てて、ブラウザを目的の場所に移動する簡単なイベントハンドラーを各ボタンに追加します。

<input type="button" value="stackoverflow.com" onClick="javascript:location.href = 'http://stackoverflow.com';" />

ただし、これを行う（notを検討してください。通常のリンクが機能する理由は次のとおりです。

  • ユーザーはすぐにリンクを認識し、他のページに移動することを理解できます
  • 検索エンジンはそれらをリンクとして識別し、それらに従うことができます
  • スクリーンリーダーはそれらをリンクとして識別し、ユーザーに適切にアドバイスできます。

また、基本的なナビゲーションを実行するためだけにJavaScriptを有効にするというまったく不要な要件を追加します。これはWebの基本的な側面であるため、このような依存関係は受け入れられないと考えています。

必要に応じて、ボタンのようにlookのように背景画像または背景色、境界線、およびその他の手法を使用してリンクのスタイルを設定できますが、カバーは、通常のリンクである必要があります。

85
Rob

ご注意ください：
W3Cはリンクタグ内のボタンには問題がないため、MSのもう1つの標準ではありません。

回答：
画像全体を表示する場合を除き、サロゲートボタンを使用します。

サロゲートボタンをタグに配置できます（divではなくスパンを使用する場合は安全です）。

ボタンなどの外観にスタイルを設定できます。

これは汎用性があります-1つのCSSコードがすべてのインスタンスを強化します-CSSを一度定義するだけで、その時点からコードが必要な場所にhtmlインスタンスをコピーして貼り付けるだけです。

ボタンごとに独自のラベルを付けることができます-多言語ページに最適です（すべての言語で写真を撮る方が簡単です-私は思う）-スクリプト全体にインスタンスを簡単に伝播することもできます。

幅をラベルの長さに調整します-必要に応じて固定幅も使用します。
IE7は上記の例外です-幅が必要です。または、このボタンをEdgeからEdgeに変更するか、幅を指定する代わりに、ボタンを左にフロートできます。
-IE7のcss：
a。 .width：150px; （プロパティの前にドットを書き留めて、私は通常、そのようなドットを追加することでIE7をターゲットにします-ドットを削除すると、プロパティはすべてのブラウザで読み取られます）
b。 text-align：center; -幅を固定している場合は、テキスト/ラベルを中央揃えにする必要があります
c。 cursor：pointer; -すべてIEはリンクポインターを正しく表示するためにこれが必要です-優れたブラウザーでは必要ありません

画像を使用する代わりに、このコードを一歩進め、CSS3を使用してスタイルを設定できます。
a。丸い角の半径（制限：IEは正方形を表示します）
b。 「ボタンのような」ボタンにするためのグラデーション（制限：operaはグラデーションをサポートしていないため、このブラウザの標準の背景色を設定することを忘れないでください）
c。 ：hover pclassを使用して、マウスポインターの位置などに応じてボタンの状態を変更します。これをテキストラベルのみ、またはボタン全体に適用できます。

以下のCSSコード：

.button_surrogate span { margin:0; display:block; height:25px; text-align:center; cursor:pointer; .width:150px; background:url(left_button_Edge.png) left top no-repeat; }

.button_surrogate span span { display:block; padding:0 14px; height:25px; background:url(right_button_Edge.png) right top no-repeat; }

.button_surrogate span span span { display:block; overflow:hidden; padding:5px 0 0 0; background:url(button_connector.png) left top repeat-x; }

以下のHTMLコード（ボタンインスタンス）：

<a href="#">
  <span class="button_surrogate">
     <span><span><span>YOUR_BUTTON_LABEL</span></span></span>
  </span>
</a>
19
Jeffz
$("a > button").live('click', function() { 
    location.href = $(this).closest("a").attr("href");
}); // fixed
15
Kalmár Gábor

以下のコードは、すべてのブラウザーで正常に機能します。

<button onClick="location.href = 'http://www.google.com'">Go to Google</button>
13
Chris H.

aタグ内にボタンを置くことはできません。ただし、JavaScriptを実行して機能させることもできます。

12
Daniel A. White

Twitterのようなフレームワークを使用している場合は、bootstrapタグにクラス "btn"を追加するだけです。この問題についてユーザーから電話があったようです。タグ内にボタンがあったので動作しています...代わりにbtnクラスを追加しただけで、今は完全に動作します..大きな間違い、おそらく顧客に費用がかかる-そしてIEですべてが動作することをコードチェックするのを時々忘れます..

例えば。 <a href="link.com" class="btn" >Checkout</a>

9
PatrickCurl

これはIEの問題にすぎないため、これを解決するために、まずブラウザーがIEであるかどうかを検出し、そうであればjqueryクリックイベントを使用します。このコードをグローバルファイルに配置します。そのため、サイト全体で修正されています。

if (navigator.appName === 'Microsoft Internet Explorer')
{
    $('a input.button').click(function()
    {
        window.location = $(this).closest('a').attr('href');
    });
}

この方法では、クリックイベントをIEのリンクされた入力ボタンに割り当てるオーバーヘッドしかありません。注：上記のコードは、クリックイベントを割り当てる前にページが完全にロードされることを確認するためのドキュメント準備関数内にあります。

また、IEを使用するときにオーバーヘッドを節約するために、入力ボタンにクラス名を割り当てました。

$('a input.button')

の代わりに

$('a input[type=button]')

。

<a href="some_link"><input type="button" class="button" value="some value" /></a>

それに加えて、CSSを使用して、マウスがホバーしたときにボタンがクリック可能に見えるようにします。

input.button {cursor: pointer}
6
Francis Lewis

私はこれが私のために働くことがわかりました

<input type="button" value="click me" onclick="window.open('http://someurl', 'targetname');">
6
lance

<form:form method="GET" action="home.do"> <input id="Back" class="sub_but" type="submit" value="Back" /> </form:form>

これはIE9でテストしたので問題なく動作します。

2
Mani Deepak

ここでの問題は、z-indexを変更する場合でも、リンクがボタンの後ろにあることです。このマークアップも無効です（ 仕様を読む ）。したがって、リンクが機能しないのは、リンクではなく実際にボタンをクリックしているためです。解決策は、マークアップを変更することです。

<button type="button"><a href="yourlink">Link</a></button>

次に、必要に応じてスタイルを設定します。デモは here です。

1
lukeocom

これは実際には非常に簡単で、javascriptは必要ありません。

最初に、ボタンの内側にアンカーを置きます

<button><a href="#">Bar</a></button>

次に、アンカータグをブロックタイプの要素に変えて、そのコンテナを埋めます

button a {
  display:block;
  height:100%;
  width:100%;
}

最後に、必要に応じて他のスタイルを追加します。

1
Ryan Tuosto

このjqueryコードをHTMLのheadセクションに挿入するだけです：

<!--[if lt IE 9 ]>
     <script>
        $(document).ready(function(){
            $('a > button').click(function(){
                window.location.href = $(this).parent().attr('href');
            });
        });
    </script>
<![endif]-->
0
user1447420

単にすべてを変換しない<button>から<span> with type="button"その後、通常のCSSボタンクラスでスタイルを設定しますか？これがIE11で機能することを確認しました。

0
sabaeus