`
pengzhaocheng16
  • 浏览: 180677 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

关于Jquery offset().top 在IE和Firefox下行为不一致的问题

 
阅读更多

关于Jquery offset().top 在IE和Firefox下行为不一致的问题

By jonny on March 2, 2012

项目中用到了JSTree,原先一个页面里包含了很多的tab标签,而且每个tab标签内功能都很多,用到了大量的js代码,后来我们决定把tab里的内容分成不同的page,然后用iframe调用。

于是奇怪的问题出现了,在IE下面拖动滚动条后jstree的node怎么也点不了了,像事件丢失了一样。调试了一会貌似不是我代码的原因,于是到JSTree的源码里看看,结果看到下面这一句,他计算的事件点击在页面的position要在node的li高度范围内,这个不知道为啥要这样做,很是奇怪,但是这就是为什么在iframe里会出怪问题的原因。
if(trgt.is("ins") && event.pageY - trgt.offset().top < this.data.core.li_height)
{
    this.toggle_node(trgt);
}




在ie下面当右边滚动条滚动后$(element).offset().top计算出来的值就不对了,必须要加document.documentElement.scrollTop 的值才能得到正确的结果,迫不得已,修补bug如下
var posY = 0;
if(window.parent!= window && $.browser.msie)
    posY= (trgt.offset().top+document.documentElement.scrollTop);
else
    posY= trgt.offset().top;
if(trgt.is("ins") && event.pageY - posY < this.data.core.li_height) { this.toggle_node(trgt); }

Jquery里也有人提到这个问题,不知道新版有没有修复此bug, 附上地址供参考
分享到:
评论

相关推荐

    jquery帮助提示.rar

    本教程将详细讲解如何在jQuery中实现帮助提示功能,适用于各种主流浏览器,包括360浏览器、IE8、Firefox、Chrome、Safari、Opera、傲游、搜狗和世界之窗。 一、jQuery基础 jQuery的核心在于它的选择器机制,它极大...

    jquery实现图片墙

    var elementTop = $(this).offset().top; var elementBottom = elementTop + $(this).outerHeight(); var viewportTop = $(window).scrollTop(); var viewportBottom = viewportTop + $(window).height(); ...

    jquery修改滚动条样式

    需要注意的是,由于滚动条样式的跨浏览器兼容性问题,可能需要针对不同的浏览器进行适配,例如使用`-moz-`和`-ms-`前缀来支持Firefox和IE/Edge。同时,考虑到性能优化,应避免在大量元素上应用滚动条样式,以减少...

    jQuery左侧焦点跟随导航菜单.zip

    7. **兼容性处理**:确保这个功能在主流浏览器如Chrome、Firefox、Safari、Edge和旧版本的IE中都能正常工作。这可能需要对某些特性进行条件检测,或者引入polyfill来模拟不支持的API。 在提供的压缩包"jiaoben...

    jquery圆形滚动条平滑效果.zip

    然而,需要注意的是,以上CSS样式仅适用于支持Webkit引擎的浏览器(如Chrome和Safari),在Firefox和IE/Edge等其他浏览器中可能无效。为了跨浏览器兼容,可以借助JavaScript库,如jQuery,来实现更统一的效果。 **...

    Jquery瀑布流插件

    4. **兼容性广**:支持所有主流的现代浏览器,包括Firefox, Chrome, Safari, Opera以及IE9及以上版本。 5. **灵活性**:插件允许使用CSS来定义元素的样式,使得设计更具可定制性。 6. **无依赖**:虽然Wookmark是...

    jQuery.position()方法获取不到值的安全替换方法

    这个问题主要出现在基于Webkit的浏览器(如谷歌浏览器和Safari)中,因为它们需要等待元素完全加载(包括图像、Flash等)才能获取其精确尺寸,而Firefox浏览器则在DOM加载完成后就能访问元素的尺寸信息。 jQuery的`...

    jquery实现多层视觉鼠标跟随效果

    最后,这个效果适用于多种浏览器,包括IE8及以上的版本,以及360、Firefox、Chrome、Safari、Opera、傲游、搜狗和世界之窗等。这得益于jQuery的跨浏览器兼容性,它自动处理了不同浏览器之间的差异,使得开发者可以...

    jQuery打造实用、美观的DIV层拖动

    测试IE、Firefox、Chrome、Safari和Edge等主流浏览器的显示效果。 6. **优化与拓展**:为了提升用户体验,你还可以添加一些额外的功能,如限制元素的拖动范围、添加拖动时的视觉反馈(如鼠标形状改变)等。此外,...

    jquery实现简单的拖拽效果实例兼容所有主流浏览器

    在本文中,我们将深入探讨如何使用jQuery实现一个简单的拖拽效果,这将为网页增加出色的交互性,并且兼容所有主流浏览器。首先,我们要理解拖拽功能的基本原理:当用户按下鼠标按钮并移动时,元素应该跟随鼠标移动。...

    jquery-scrollfix:jQuery插件,用于在元素离开视图时使其固定

    jQuery Scrollfix插件对现代浏览器支持良好,包括Chrome、Firefox、Safari、Edge等。对于不支持fixed定位的老式浏览器,如IE6/7,需要额外的 polyfill 或考虑其他解决方案。此外,为了提高性能,避免在滚动事件中...

    jQuery实现浮动层随浏览器滚动条滚动的方法

    然而,值得注意的是,这个实例在Firefox下运行效果最佳,而在Internet Explorer (IE) 版本6.0的情况下可能表现不佳。这可能是因为不同浏览器对CSS样式和JavaScript的支持程度不同,尤其是对于老版本的IE,可能不支持...

    前端项目-chardin.js.zip

    `chardin.js` 支持现代浏览器,包括Chrome、Firefox、Safari、Edge以及IE9及以上版本。对于低版本的IE浏览器,可能需要引入jQuery和其他polyfill库来确保兼容性。 为了提高性能和用户体验,建议在用户首次访问时才...

    jQuery实现的兼容性浮动层示例

    这样的实现确保了在支持jQuery的浏览器(包括IE6+和Firefox3.0)中,浮动层都能正常工作。为了进一步提高兼容性,我们可以考虑使用Modernizr等工具检测浏览器特性,或者使用polyfill来补充老旧浏览器不支持的功能。 ...

    jQuery Position方法使用和兼容性

    例如,Chrome、IE和Firefox对`line-height`的默认值处理不尽相同。因此,为了确保跨浏览器的一致性,开发者需要确保所有浏览器具有相同的`line-height`等属性设置。 下面是一个示例,展示了当`line-height`未设置...

    jQuery使用drag效果实现自由拖拽div

    这是因为如果内容被选中,会影响拖拽效果,尤其是在Firefox和Chrome浏览器中,可以通过CSS设置`{-moz-user-select:none;-webkit-user-select:none;}`实现这一效果。对于IE浏览器,需要通过JavaScript代码添加事件...

    jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层

    7. **浏览器兼容性**:测试环境表明,这段代码兼容ie6+和Firefox3.0,但需要注意的是,随着时间推移,对于更现代的浏览器和更新的jQuery版本,可能需要进行调整以保持最佳兼容性和性能。 这个例子展示了如何利用...

    前端项目-sticky-kit.zip

    同时,`sticky-kit`支持大部分现代浏览器,包括Chrome、Firefox、Safari、Edge等,对于老版本的IE浏览器,它也提供了一定程度的支持。 在实际开发中,`sticky-kit`可以与Bootstrap、Foundation等前端框架很好地集成...

Global site tag (gtag.js) - Google Analytics