web-dev-qa-db-ja.com

Firefoxでアンカー要素が機能せず、chrome

クライアントサイトの画像にハイパーリンクがあります。 IEで動作していますが、Chrome/Mozillaで同じページを開くと、アンカーポインターが表示されず、クリックしても何も起こりません。私のコード：

<a href="Home.aspx?ModuleID=1">
 <img alt="Alternative Text" src="Images/Logo.gif" />
</a>

誰かが問題が何であるかについて何か考えを持っていますか？

htmlfirefoxgoogle-chromeanchor
7
surenv2003

簡単な回避策：これは、これまでにテストしたすべてのブラウザーで機能します。document.getElementById([anchor tag]).scrollToView(true);を使用します。

例：-from--

<a href="#" onclick="document.getElementById('ShowMeHow2').scrollIntoView(true);return false;">

- に - 

<a id="ShowMeHow2" name="ShowMeHow2"> </a>
11
Jim Rider

ページでcssz-orderを使用しているかどうかを確認してください。 Zオーダーが正しくないと、ボタンやリンクが機能しなくなる可能性があります。

8
Sean

Chrome * onlyで、アンカーIDをブロックレベルの要素で囲まずに、コールアウトを囲むことで、同じ問題に関してうまくいったことがわかりました。

例.

    <body>
    <a id="top" name="top"> </a>
    <p>...</p>
    <p><a href="#top">Back to Top</a></p>
    </body>
    <!-- /end ex. -->

これがお役に立てば幸いです:)すべてのブラウザで動作します。

-ベン

5
Ben Lambert

私は同じ問題に直面しています。 この提案 （position：relativeを含むdivに追加する）はそれに対処しているようですが、私は絶対的なポジショニングを行っており、別の方法でこれを回避します。しかし、私はそれが他の誰かを助けるかもしれないと思いました。

4
cdonner

Chromeで、ナビゲーションリンクにカーソルを合わせてもカーソルがポインティングハンドに変わらず、クリックしてもリンク自体が応答しないという同様の問題が発生しました。z-indexプロパティを追加することによりスタイルシートのアンカー要素に999の値を指定すると、期待される動作が返されました。

1
Randy Purcell

＃文字をアンカーに配置せず、リンクにのみ配置します

Correct <a name="top">[top of page]</a> <a link="#top">[link]</a>

Incorrect <a name="#top">[top of page]</a> <a link="top">[link]</a>
1
Mauricio Moreira

私はこの問題に過去数時間を費やしました。FirefoxとIEですが、クロムではありません。私はプロの開発者ではないので、理由はわかりません。しかし、場合によってはchromeは、スタックされたdiv内からタグを読み取らず、同じページの目的の場所に配信しないようです。私の後にスパンIDを追加することで問題を解決しました。 id ...-したがって、次のようになります。

<a href="#ID_NAME"></a>
...
<a id="ID_NAME><a/><span id="ID_NAME"></span>

Firefoxでテスト済み、ChromeおよびSafari。ただし、このマシンにはテストするIEはありません。

0
Tim

完全なHTMLソースコードがない場合、このアンカーはネストされているか、終了タグのない要素の後にあることを示します。

これが問題でない場合は、完全なHTMLソースコードを投稿してください。

この問題は、次の方法でドキュメントを検証することで簡単に見つけることができます。

これはW3Cの公式HTML/XHTMLバリデーターであるため、一部の要素が閉じられていない場合は、修正する必要がある要素を示します。

編集：回答のコメントに投稿されたHTMLソースコードを見た後...ドキュメントタイプ（DOCTYPE）宣言はどこにありますか？あなたはそれを追加するのを忘れました！

HTMLドキュメントの先頭にこれを追加します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

ドキュメントタイプを指定しない場合、ブラウザはWebページを「クイック」モードでレンダリングします。これは互換モードであり、期待どおりにページをレンダリングしない場合があります。詳細については、こちらをご覧ください。

これで問題が解決するかどうか教えてください！

0
Matías Fidemraizer

これで発生する可能性のある別の問題は（おそらくここではそうではありませんが）、タグのcssポインター宣言を変更した可能性があることです。

a {
    cursor: default;
}

その場合でも、ホバー効果とリンクをクリックしても機能するはずです。

0
Brian Barnes

私も同様のケースがありました。私の場合。フロートを左右に使って3つのdivを揃えようとしていました。それらの1つはposition：relative属性を持っていました。これを削除すると、Firefoxのアンカータグが機能しました。余分な属性を追加するのではなく。これが他の人に役立つことを願っています。

0
Farjad

Firefoxの場合、このスクリプトをページのHEADセクションに適用します。

<script>
    $(document).ready(function(){
        var h = window.location.hash;
        if (h) {
            var headerH = $('#navigationMenu').outerHeight();
            $('html, body').stop().animate({
                scrollTop : $(h).offset().top - headerH + "px"
            }, 1200, 'easeInOutExpo');

            event.preventDefault();
        }
    });
</script>

Chromeの場合、ページのHEADセクションで次を使用します。

<script>
    $(document).ready(function () {
        var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
        if (window.location.hash && isChrome) {
            setTimeout(function () {
                var hash = window.location.hash;
                window.location.hash = "";
                window.location.hash = hash;
            }, 300);
        }
    });
</script>

あなたのページのHEADセクションにある両方のスクリプトをコピーして貼り付けるだけです。私にとってはうまくいきました！:)

0
sammy

ばかげているように見えますが、以前は同じ問題がありました。拡張機能の一部として既存のページにアンカーリンクを配置しただけです。奇妙なことに、リンクはIEでクリックできますが、chrome/firefoxではクリックできません。

注意深く見てみると、印刷機能のためにアンカータグのリンクを削除する既存のスクリプトがあることがわかりました。追加されたアンカータグは同じページの一部であるため、この問題が発生しました。新しく追加されたアンカーのIDを持つif条件を追加して、アンカーのリンクを削除するために追加された機能をスキップするようにしました。

0
Ravi Shankar Kota

同じIDを持つ別の要素を誤って持つ可能性があることがわかりました。私の場合、それはオプションタグであり、ビューに移動することはできません。そのため、$('#yourid')を試して、同じIDのタグが予期せず存在するかどうかを確認することをお勧めします。

0
Matthew O'Riordan