锚元素在 Firefox 和 chrome 中不起作用
Posted
技术标签:
【中文标题】锚元素在 Firefox 和 chrome 中不起作用【英文标题】：Anchor element not working in firefox and chrome 【发布时间】：2011-06-20 13:09:08 【问题描述】：我的客户网站上的图片上有一个超链接。它在 IE 中工作，但是当我在 Chrome/Mozilla 中打开同一页面时，它没有显示锚指针，点击也没有任何反应。我的代码：
<a href="Home.aspx?ModuleID=1">
<img src="Images/Logo.gif" />
</a>
有人知道问题可能是什么吗？
【问题讨论】：
【参考方案1】：简单的解决方法：这适用于我迄今为止测试过的所有浏览器，使用document.getElementById([anchor tag]).scrollToView(true);
示例： --来自--
<a href="#" onclick="document.getElementById('ShowMeHow2').scrollIntoView(true);return false;">
--到--
<a id="ShowMeHow2" name="ShowMeHow2"> </a>
【讨论】：
这确实有效，但不会更新浏览器地址栏。在Updating address bar with new URL without hash or reloading the page上查看如何更新浏览器地址栏和历史记录 再次这个答案会严重误导人们，绝不是一个有效的答案。这个问题是一个浏览器错误，会破坏页面并使网站无法被搜索引擎抓取（并破坏网站的经济性，从而破坏自己的整个职业）应该不导致考虑此答案曾经.【参考方案2】：检查您是否在页面中使用 css z-order。不正确的 z 顺序会导致按钮和链接不起作用。
【讨论】：
【参考方案3】：我也面临同样的问题。 This suggestion（将 position: relative 添加到包含的 div 中）似乎解决了它，但我正在做绝对定位，需要以另一种方式解决这个问题。不过，我认为它可能对其他人有所帮助。
【讨论】：
将 css 属性位置添加到 relative 工作完美！【参考方案4】：对于 Chrome *only 的相同问题，我发现对我有用的是不要将锚 id 包含在块级元素中，而是包含标注。
例如
<body>
<a id="top" name="top"> </a>
<p>...</p>
<p><a href="#top">Back to Top</a></p>
</body>
<!-- /end ex. -->
希望这会有所帮助 :) 适用于所有浏览器。
-本
【讨论】：
我想补充一点，为了符合 W3C html5 验证，您必须删除 name 属性，因为它在 HTML5 中已过时。【参考方案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>
【讨论】：
【参考方案6】：我在 Chrome 中遇到了类似的问题，当我将鼠标悬停在我的导航链接上时，我的光标没有变为指向手，并且在单击时链接本身没有响应。通过将值为 999 的 z-index 属性添加到样式表中的锚元素，返回了预期的行为。
【讨论】：
【参考方案7】：如果没有完整的 HTML 源代码，我会指出这个锚是嵌套的，或者是在一些没有结束标记的元素之后。
如果这不是问题，请发布完整的 HTML 源代码。
您可以通过验证您的文档轻松找到此问题：
http://validator.w3.org/它是 W3C 官方的 HTML/XHTML 验证器，所以如果某些元素没有关闭，它会指出你需要更正哪一个！
编辑： 看完你在答案的 cmets 中发布的 HTML 源代码后……文档类型 (DOCTYPE) 声明在哪里？你忘了添加它！
在 HTML 文档的开头添加：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
当您不提供文档类型时，浏览器会以“怪癖”模式呈现网页，这是一种可能无法按预期呈现页面的兼容模式。在此处了解更多信息：
http://en.wikipedia.org/wiki/Quirks_mode如果这能解决您的问题，请告诉我！
【讨论】：
我检查了validator.w3.org 没有检测到未关闭的标签。连接到服务器后，我可以共享整个代码 事实上，我已经打开了您的 HTML 标记而没有更改它，并且该链接有效。我点击图片并尝试打开链接！【参考方案8】：我也遇到过类似的情况。就我而言。我试图使用浮动左/右对齐 3 个 div。其中之一具有 position:relative 属性。一旦我删除了这个，Firefox 锚标签就起作用了。而不是添加额外的属性。希望这可以帮助其他人。
【讨论】：
-将我的经验和其他关于添加位置的评论放在一起：相对似乎 Firefox & co 浏览器中的错误是，在给定的 div 容器中，它们需要在内部 div 中保持一致的定位。否则锚点不起作用。【参考方案9】：我发现有时您可能会错误地使用具有相同 ID 的另一个元素。在我的例子中，它是一个选项标签，不能移动到视图中。因此，我建议您尝试$('#yourid') 看看是否有任何标签意外具有相同的ID。
【讨论】：
【参考方案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 来测试。
【讨论】：
这应该是一个单独的问题（不是答案，所以你可能会得到一些反对意见（我没有代表反对），但在你的情况下，你有重复的 id（“ID_NAME” - 其中无论如何都应该小写）并且在 a 的 id 之后没有结束引号。【参考方案11】：另一个可能发生的问题（尽管这里可能不是这种情况）是您可以更改 a 标签的 css 指针声明，例如。
a
cursor: default;
如果是这种情况，悬停效果和点击链接应该仍然有效。
【讨论】：
【参考方案12】：看起来很傻，但我曾经遇到过同样的问题。我只是在现有页面中放置了锚链接作为增强功能的一部分。奇怪的是，这些链接在 IE 中是可点击的，但在 chrome/firefox 中不可点击。
仔细查看后，我发现有一个现有的脚本可以删除用于打印功能的锚标记链接。 添加的锚标记是同一页面的一部分，因此存在此问题。 我使用新添加的锚点的 id 添加了 if 条件，以便它们跳过添加的功能以删除锚点的链接。
【讨论】：
【参考方案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 中不起作用的主要内容，如果未能解决你的问题，请参考以下文章
@keyframes 动画在 Firefox 55.03 中不起作用
jquery animate() 在 chrome 和 firefox 中不起作用