Html 锚元素在 Firefox 和 chrome 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4884498/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Anchor element not working in firefox and chrome
提问by surenv2003
I have a hyperlink on an image on my client site. It's working in IE but when I open the same page in Chrome/Mozilla it's not showing the anchor pointer and nothing happens on clicking either. My code:
我在我的客户网站上有一个图片的超链接。它在 IE 中工作，但是当我在 Chrome/Mozilla 中打开同一页面时，它没有显示锚点指针，并且单击也没有任何反应。我的代码：
<a href="Home.aspx?ModuleID=1">
<img alt="Alternative Text" src="Images/Logo.gif" />
</a>
Does somebody have any idea what the issue could be?
有人知道可能是什么问题吗？
回答by Jim Rider
Simple Work around: This works in all browsers I have tested so far use document.getElementById([anchor tag]).scrollToView(true);
简单的解决方法：这适用于我迄今为止测试过的所有浏览器使用 document.getElementById([anchor tag]).scrollToView(true);
Example: --from--
示例：--来自--
<a href="#" onclick="document.getElementById('ShowMeHow2').scrollIntoView(true);return false;">
--to--
- 到 -
<a id="ShowMeHow2" name="ShowMeHow2"> </a>
回答by Sean
Check to see if you are using css z-order at all in the page. Incorrect z-orders can cause buttons and links to not work.
检查您是否在页面中完全使用了 css z-order。不正确的 z 顺序会导致按钮和链接不起作用。
回答by Ben Lambert
What I found that worked for me regarding the same issue with Chrome *only, was to NOT enclose the anchor id within a block-level element BUT enclose the call-out.
我发现对于 Chrome *only 的相同问题对我有用的是，不要将锚点 id 包含在块级元素中，但要包含调用。
ex.
前任。
<body>
<a id="top" name="top"> </a>
<p>...</p>
<p><a href="#top">Back to Top</a></p>
</body>
<!-- /end ex. -->
Hope this helps :) works in all browsers.
希望这会有所帮助:) 适用于所有浏览器。
-Ben
-本
回答by cdonner
I am facing the same issue. This suggestion(adding position: relativeto the containing div) seems to adress it, but I am doing absolute positioning and need to work around this in another way. I figured it might help someone else, though.
我面临同样的问题。这个建议（添加位置：相对于包含的 div）似乎解决了它，但我正在做绝对定位，需要以另一种方式解决这个问题。不过，我认为它可能会帮助其他人。
回答by Mauricio Moreira
do not put the # character at anchor, only in the link
不要把# 字符放在锚点，只放在链接中
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>
回答by Randy Purcell
I experienced a similar problem in Chrome where my cursor did not change to a pointing hand when hovered over my navigation links, and the links themselves were unresponsive when clicked on. By adding the z-index property with a value of 999 to my anchor element in my style sheet, the expected behavior returned.
我在 Chrome 中遇到了类似的问题，当鼠标悬停在我的导航链接上时，我的光标没有变成指向手，并且点击链接时链接本身没有响应。通过将值为 999 的 z-index 属性添加到我的样式表中的锚元素，返回了预期的行为。
回答by sammy
For Firefox, apply this script in the HEAD section of the page.
对于 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>
For Chrome, use the following in the HEAD section of your page.
对于 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>
Just Copy and Paste BOTH the scripts in the HEAD section of you page. It worked for me! :)
只需复制并粘贴页面 HEAD 部分中的两个脚本。它对我有用！:)
回答by Farjad
i had a similar case. In my case. i was trying to aligning 3 divs using floats left/right. One of them had position:relative attribute. Once i removed this then firefox anchor tags worked. Rather than adding an extra attribute. Hope this may help others.
我有一个类似的案例。就我而言。我试图使用左/右浮动来对齐 3 个 div。其中之一具有位置：相对属性。一旦我删除了它，那么 Firefox 锚标记就起作用了。而不是添加额外的属性。希望这可以帮助其他人。
回答by Matthew O'Riordan
I have found that sometimes you can mistakenly have another element with the same ID. In my case, it was an option tag, which cannot be moved into view. As such, I would recommend you try $('#yourid')to see if there are any tags unexpectedly with the same ID.
我发现有时您可能会错误地拥有具有相同 ID 的另一个元素。在我的情况下，它是一个选项标签，无法移动到视图中。因此，我建议您尝试$('#yourid')查看是否有任何标签意外具有相同的 ID。
回答by Matías Fidemraizer
Without the full HTML source code, I'll point to that this anchor is nested or after to some element that doesn't have a closing tag.
如果没有完整的 HTML 源代码，我将指出该锚点是嵌套的，或者指向某个没有结束标记的元素。
Post full HTML source code if this isn't the problem.
如果这不是问题，请发布完整的 HTML 源代码。
You can find this problem easly by validating your document with:
您可以通过以下方式验证您的文档来轻松找到此问题：
It's the W3C official HTML/XHTML validator, so if some element isn't closed, it'll point which one you need to correct!
它是 W3C 官方 HTML/XHTML 验证器，因此如果某些元素未关闭，它将指出您需要更正哪个元素！
EDIT: After watching your HTML source code posted in answer's comments... where's the document type (DOCTYPE) declaration? You forgot to add it!
编辑：在看到您在回答评论中发布的 HTML 源代码后……文档类型（DOCTYPE）声明在哪里？你忘记添加了！
Add this at the beginning of your HTML document:
在 HTML 文档的开头添加：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
When you don't provide a document type, browsers render web pages in "quircks" mode, which is a compatibility mode that may not render your page as you expected. Learn more about that here:
当您不提供文档类型时，浏览器会以“quircks”模式呈现网页，这是一种兼容模式，可能无法按预期呈现您的页面。在此处了解更多信息：
Let me know if this solves your problem!
如果这能解决您的问题，请告诉我！
