logo标签列表

锚点元素在Firefox和Chrome中无法正常工作

htmlfirefoxgoogle-chromeanchor
7

我在客户端网站上的一张图片上有一个超链接。它在IE中可以使用，但是当我在Chrome/Mozilla中打开同一页时，指针没有显示，并且单击也没有任何反应。我的代码：

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

有人知道问题可能是什么吗？

13个回答
11

简单的解决方法：这个方法在我测试过的所有浏览器中都有效，使用document.getElementById([锚点标签]).scrollToView(true);

例如： --来自--

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

--to-- 

<a id="ShowMeHow2" name="ShowMeHow2"> </a>
这个确实可以工作，但它不会更新浏览器地址栏。请参阅在不使用哈希或重新加载页面的情况下更新浏览器地址栏，了解如何更新浏览器地址栏和历史记录。 - johnsampson
再次强调，这个答案会极大地误导人们，绝不是一个可行的答案。这个问题是浏览器的一个漏洞，它会破坏页面，使网站无法被搜索引擎爬取（并破坏网站的经济，从而毁掉自己的整个职业），因此这个答案永远不应该被考虑。 - John
8

检查页面中是否使用了CSS z-order。不正确的z-order可能会导致按钮和链接无法正常工作。

5

我发现在Google Chrome浏览器上处理同样的问题时，不要将锚点ID包含在块级元素中，而是将其放在提示框中。

例如：

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

希望这可以帮助您 :) 在所有浏览器中都有效。 -Ben
2
我想补充一点，为了符合W3C HTML5验证标准，您必须删除name属性，因为在HTML5中它已经过时了。 - Ben Lambert
5

我也遇到了同样的问题。这个建议（在包含div中添加position: relative）似乎可以解决，但我正在使用绝对定位，需要用另一种方式解决。我认为这可能会帮助其他人。

1
将CSS属性position设置为relative非常完美！ - Andres
2
不要在锚点中放置#字符，只需放在链接中。
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
在Chrome中，我遇到了类似的问题，当鼠标悬停在导航链接上时，光标没有变成手形，并且点击链接时链接本身无响应。通过在样式表中为锚元素添加z-index属性并将值设为999，这个问题得以解决。
0

如果没有完整的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">

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

如果这解决了你的问题，请告诉我！

我使用 http://validator.w3.org/ 进行了检查，没有发现未关闭的标签。一旦连接到服务器，我可以分享整个代码。 - surenv2003
事实上，我已经打开了您的HTML标记而没有进行更改，那个链接是有效的。我点击了图片并尝试打开链接！ - Matías Fidemraizer
0

另一个可能出现的问题（虽然这里可能不是这种情况），就是您可能已经更改了a标签的css指针声明。

a {
    cursor: default;
}

如果是这样的话，悬停效果和点击链接仍然可以正常工作。

0

我花了最近几个小时来解决这个问题，在Firefox和IE中工作的页面锚标签在Chrome中却失效了。我不是专业开发人员，所以不知道为什么，但似乎在某些情况下，Chrome不能读取堆叠的div内部的a标签，并将您带到同一页上的所需位置。我通过在我的a id之后添加一个span id来解决了这个问题... - 所以它看起来像这样：

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

已在Firefox、Chrome和Safari中进行了测试。但此机器上没有IE可供测试。

1
这应该是一个单独的问题（不是答案，所以你可能会得到一些负评（我没有downvote的权限），但在你的情况下，你有重复的id（“ID_NAME” - 无论如何都应该是小写），并且在a的id后没有闭合引号。 - Brian Barnes
0
我有一个类似的情况。在我的情况下，我试图使用左/右浮动来对齐3个div。其中一个具有position:relative属性。一旦我删除了它，Firefox锚标签就可以正常工作了。希望这可以帮助其他人，而不是添加额外的属性。
结合我的经验和其他评论，关于添加position:relative，似乎Firefox和其他浏览器中的bug是，在给定的div容器内，它们需要在内部div之间保持一致的定位。否则锚点将无法正常工作。 - Farjad
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接