Question

我面临一个惊人的问题。我的客户端网站上的图像有超链接。它在IE中工作，但是当我在Chrome / Mozilla中打开同一页面时，它没有显示锚点指针，点击任何一个都没有任何反应。我的链接代码是

<a href="Home.aspx?ModuleID=1">
    <img src="Images/Logo.gif" border="0"/>
</a>

有人知道问题是什么吗？

Answer 1

简单解决方法：这在我到目前为止测试的所有浏览器中均可使用document.getElementById([anchor tag]).scrollToView(true);

实施例： --from -

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

- 到 -

<a id="ShowMeHow2" name="ShowMeHow2"> </a>

Answer 2

检查页面中是否正在使用css z-order。不正确的z顺序会导致按钮和链接无效。

Answer 3

我发现仅针对与Chrome *相同的问题对我有用，就是不要将锚ID包含在块级元素中，而是将所谓的内容包围起来。

离。

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

希望这有帮助:)适用于所有浏览器。

-Ben

Answer 4

我面临同样的问题。 This suggestion（将 position：relative 添加到包含的div中）似乎是在解决它，但我正在做绝对定位，需要以另一种方式解决这个问题。不过我认为它可能对其他人有帮助。

Answer 5

不要将＃字符置于锚点，仅在链接

中

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>

Answer 6

我在Chrome中遇到了类似的问题，我的光标在我的导航链接上悬停时没有变成指针，点击时链接本身没有响应。通过将值为999的z-index属性添加到样式表中的anchor元素，返回预期的行为。

Answer 7

如果没有完整的HTML源代码，我会指出这个锚是嵌套的，或者是一些没有结束标记的元素。

如果不是问题，请发布完整的HTML源代码。

您可以通过以下方式验证文档，轻松找到此问题：

http://validator.w3.org/

这是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">

当您不提供文档类型时，浏览器会以“quircks”模式呈现网页，这是一种兼容模式，可能无法按预期呈现您的页面。在此处了解更多相关信息：

http://en.wikipedia.org/wiki/Quirks_mode

请告诉我这是否解决了您的问题！

Answer 8

我有一个类似的案例。就我而言。我试图使用浮动左/右对齐3个div。其中一个有位置：相对属性。一旦我删除了这个firefox锚标签工作。而不是添加额外的属性。希望这可以帮助别人。

Answer 9

我发现有时你可能错误地拥有另一个具有相同ID的元素。就我而言，它是一个选项标签，无法移动到视图中。因此，我建议您尝试$('#yourid')以查看是否有任何标记意外具有相同的ID。

Answer 10

我已经花了这个问题的最后几个小时，在firefox和IE中使用的页面锚标签，但不是chrome。我不是一个专业的开发人员，所以我不知道为什么，但似乎在某些情况下，chrome没有从堆叠的div中读取标签并将你带到同一个地方页。我通过在我的id之后添加span id来绕过它... - 所以它看起来像这样：

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

在Firefox，Chrome和Safari中测试过。不要在这台机器上安装IE浏览器。

Answer 11

这可能发生的另一个可能的问题（尽管可能不是这里的情况）是你可能已经改变了a标签的css指针声明，例如。

a {
    cursor: default;
}

如果是这种情况，悬停效果并点击链接仍应有效。

Answer 12

看起来很傻，但我曾经遇到过同样的问题。我只是将锚链接放在现有页面中作为增强功能的一部分。这些链接可以在IE浏览器中点击，但不能在chrome / firefox中点击。

仔细观察后，我发现现有的脚本会删除锚标记的链接以进行打印功能。添加的锚标签是同一页面的一部分，因此出现了这个问题。我添加了if条件和新添加锚点的id，以便它们跳过添加的功能以删除锚点的链接。

Answer 13

对于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部分中的脚本。它对我有用！：）

锚标签不在firefox和chrome中工作

13 个答案: