FF 中的锚标签问题；定位隐藏的 div答案

【问题标题】：Anchor tag issue in FF; targeting hidden divFF 中的锚标签问题；定位隐藏的 div
【发布时间】：2011-07-11 12:26:24
【问题描述】：

我在使用 Firefox 和从外部页面到着陆页上的选项卡 div 的锚链接时遇到问题；虽然 IE 正确呈现这些（我知道，这意味着很少），但 FF 和 Chrome 都将用户发送到实际锚标记上方或下方的位置。我没有编写原始代码，但我找不到太多关于会导致此问题的 FF 错误或解决方案？

起始链接： http://www.washington.edu/students/gencat/academic/sis.html#INTSTUDUG

【问题讨论】：

如果它发生在两个不同的浏览器中，那么它不可能是 FF 中的错误。您有 14 个可能导致 DOM 解析问题的 HTML 错误？

标签： php firefox anchor hidden html

【解决方案1】：

某些 JavaScript 在加载后会更改页面的布局。如果您在浏览器上禁用 JavaScript，您将看到 FF 和 Chrome 都可以正常工作。

【讨论】：

页面加载后概览部分消失。所以浏览器在正确的位置，但是页面发生了变化。

【解决方案2】：

这与您的javascript有关。锚点将您带到页面上的特定位置，然后 javascript 更改选项卡，使页面顶部的 div 更大。这发生在页面滚动之后，这会让你失去锚点。

尝试在打开 JS 和关闭 JS 的情况下加载页面，你会明白我的意思。

如何解决这个问题？您可以使用 jQuery 滚动到文档就绪功能上的锚点，如下所示：

$(function() { 
    var anchor = $('a[name="' + window.location.hash.replace('#', '') + '"]');
    if(anchor) {
         $('html, body').animate({scrollTop: anchor.offset().top});
    }
});

稍微有点hacky的修复，但它会工作。更好的方法是确保 JS 不会更改文档就绪时的布局:)

【讨论】：