jQuery Tools Tabs + History - 防止在 IE 6 和 7 中跳转答案

【问题标题】：jQuery Tools Tabs + History - Preventing jumping in IE 6 and 7jQuery Tools Tabs + History - 防止在 IE 6 和 7 中跳转
【发布时间】：2012-05-20 18:41:10
【问题描述】：

我正在使用 jQuery Tabs 插件和“历史”插件，以允许添加书签和使用浏览器后退按钮。一切都很好 - 除了在 IE 6 和 7 中。当您加载页面时，IE 会跳到锚点。

这是示例实现：http://coolkidz.com/sell-consign/

有什么想法可以让 IE 表现得很好？

【问题讨论】：

你没有注意到 IE 给你的 js 错误？第 41 行，字符 6
另外，jquery.tools.min.js 中的第 1 行，字符 1。我认为你应该先修复这些错误
不管怎样，你的页面在 Firefox 3.6 中看起来也很糟糕（是的，尽管 Mozilla 尽了最大努力，但仍有人使用它）
感谢 cmets，伙计们！我会看看这些错误。
@Shadow_boi - 您在哪个版本的 IE 中看到它？我已经测试过 IE6 和 IE7 并没有看到任何错误（至少不是通过 Browserstack）。

标签： jquery internet-explorer jquery-tools

【解决方案1】：

当在 IE 6/7 中启用历史记录工具时，它会向页面添加一个隐藏的 iframe，并最初将 iframe 的 location.hash 设置为 '#'。发生这种情况时，IE 会滚动到页面底部的 iframe（即使它是隐藏的）。

由于无法编辑 jQuery Tools 源代码，我可以想到两种解决方法：

在初始化 jQuery 工具选项卡 (demo) 之前添加此 JavaScript：
```
if ($.browser.msie && $.browser.version < '8') {
    $(window).one("hash", function(e, h) {
        if (h === '#') {
            $(window).scrollTop(0);
        }
    });
}
```
在历史记录工具初始化后，它会滚动到页面顶部。这种解决方法的缺点是，如果窗口不在页面顶部，IE 会停留在正确的位置，但这会迫使它滚动到顶部。
添加这个 CSS (demo)：
```
iframe {
    position: absolute;
}
```
IE 不会尝试滚动到 position: absolute iframe。此解决方法的缺点是它会影响您页面上的任何其他 iframe。

我建议使用解决方法 #1。

【讨论】：

感谢您的快速回复！我会测试它并报告！
那个 JS 修复确实看起来应该可以工作 - 虽然它引起了一些跳跃。不过，我选择了 iframe 修复，这是一个绝妙的想法。我继续在 .inner div 中定位 iframe，并将定位专门留给 IE7 和 IE6。效果很好！
我说得太早了.. IE 在欺骗我。我很高兴测试，鉴于我已经滚动到顶部，它似乎正在工作。最好的测试方法是单击来自coolkidz.com/about 的链接，然后点击这些链接。＃1是“工作”，但最终用户端发生的屏幕跳跃效果和刷新不会削减它。我会进一步测试。