Anchor标记不能在Firefox和Chrome中工作
我正面临一个令人惊讶的问题。我在客户端网站上的图像上有超链接。它在IE中工作,但当我在Chrome/Mozilla中打开相同的页面时,它不显示锚点指针,点击时也没有任何反应。我的链接代码是Anchor标记不能在Firefox和Chrome中工作
<a href="Home.aspx?ModuleID=1">
<img src="Images/Logo.gif" border="0"/>
</a>
有人知道这个问题是什么吗?
如果没有完整的HTML源代码,我会指出这个锚点是嵌套的,或者是一些没有结束标记的元素之后。
如果这不是问题,发布的HTML代码完整。
您可以通过验证您的文档轻松找到这个问题:
这是W3C官方HTML/XHTML验证,因此,如果某个元素不是封闭的,它会指出哪一个你需要纠正!
编辑: 看到你的HTML源代码张贴在答案的评论...文档类型(DOCTYPE)声明在哪里?你忘了添加它!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
当你不提供文档类型,浏览器显示网页中的“quircks”模式,这是可能不会呈现兼容模式:
在HTML文档的开头添加这你的页面如你所料。了解更多关于在这里:
让我知道如果这能解决您的问题!
检查您是否在页面中使用css z-order。不正确的z顺序可能会导致按钮和链接不起作用。
简单的解决方法:这个作品在我测试了使用至今的所有浏览器document.getElementById([anchor tag]).scrollToView(true);
例子: --from--
<a href="#" onclick="document.getElementById('ShowMeHow2').scrollIntoView(true);return false;">
--to--
<a id="ShowMeHow2" name="ShowMeHow2"> </a>
我有一个类似的情况。就我而言。我正在尝试使用左/右花车对齐3个div。其中一个有位置:相对属性。一旦我删除了这个,然后Firefox的锚标签工作。而不是添加额外的属性。希望这可以帮助其他人。
我发现有时候您可能会错误地使用相同ID的其他元素。在我的情况下,它是一个选项标签,不能移动到视图中。因此,我建议您尝试$('#yourid')
以查看是否有任何标签意外地具有相同的ID。
我发现只针对与Chrome *相同的问题,我的工作是不将封闭标识封装在块级元素中,而是附上标注。
ex。
<body>
<a id="top" name="top"> </a>
<p>...</p>
<p><a href="#top">Back to Top</a></p>
</body>
<!-- /end ex. -->
希望这有助于:)在所有浏览器中都能正常工作。
-Ben
我已经花了几个小时,这个问题,在页面锚标签在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来测试。
可能发生的另一个可能的问题(尽管这可能不是这种情况)是你可以改变a标签的css指针声明,例如。
a {
cursor: default;
}
如果是这种情况,悬停效果和点击链接应该仍然有效。
它看起来很愚蠢,但我曾经有过同样的问题。我只是将锚链接放在现有页面中作为增强功能的一部分。显然链接在IE中可点击,但在Chrome/Firefox中无法点击。
一旦仔细查看,我发现有一个现有的脚本可以删除打印功能的定位标记链接。 添加的锚标签是同一页的一部分,因此存在此问题。 我添加如果条件与新添加的锚的ID,以便他们将跳过添加的功能删除锚的链接。
不要把#字符锚泊,只是在链接
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>
对于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部分即可。它为我工作! :)
我在Chrome中遇到了类似问题,其中当光标在我的导航链接上悬停时并未更改为指针,并且链接本身在单击时没有响应。通过在我的样式表中添加一个值为999的z-index属性到我的锚点元素,返回预期的行为。
我检查了http://validator.w3.org/没有检测到未封闭的标签。只要连接到服务器,我就可以共享整个代码 – surenv2003 2011-02-03 11:45:00
由于用户限制,无法发布整个代码 – surenv2003 2011-02-03 12:11:08
严正,请使用http://pastebin.com/并发布评论和链接! ;) – 2011-02-03 12:12:57