`
big_student
  • 浏览: 40293 次
  • 性别: Icon_minigender_1
  • 来自: 宝鸡
社区版块
存档分类
最新评论

jQuery定位IE9和IE10 BUG

阅读更多

遇到了一个很奇怪的问题:

在IE9和IE10中,当对一个html的样式初始了一个很大的left或者top时,使用jQuery的offset()或者jQuery UI的position重新定位会出现left或者top计算错误,造成元素离正确的位置很远。看例子:

<body style="overflow: hidden">
    <div id="window" style=" display: block; position: absolute; left:214749px; top:127px;padding: 0; overflow: hidden; height: 400px; width: 800px; z-index: 10000;border:1px solid red">
</div>

<script>
    $(function(){
        $("body").height($(window).height()).width($(window).width());
        $("#window").offset({left:282, top:127});
    })
</script>

 发现window的left为-429214.73px,而如果使用css方法不会有问题,即       $("#window_1").css({left:"282px", top:"127px"}); 如果将其中的left:214749px改为214748px则可定位成功。

问题原因:

调试了jQuery源代码发现是window.getComputedStyle(elem, null)在IE9和IE10中对left和top设置了大于214748的值时,getComputedStyle会返回错误的计算结果,造成jquery的offset方法错误,如果你使用了jQuery ui的position方法,因为offset方法的问题今儿引起position定位错误问题。

结论:

该bug是ie9和ie10对定位过大的设置getComputedStyle返回错误的大小引起的。

分享到:
评论

相关推荐

    jquery.uploadify.js修复IE9 IE10浏览按钮点击无效的bug

    总之,修复jQuery Uploadify.js在IE9和IE10中的问题,不仅解决了用户在这些浏览器上的使用障碍,还确保了跨浏览器的一致性。对于开发者来说,了解如何处理这类兼容性问题,以及掌握Uploadify的核心功能和配置,都是...

    jQuery ajaxFileUpload.js 插件 ie9 下bug 修复

    总的来说,`jQuery ajaxFileUpload.js 插件 ie9 下bug 修复`这个主题涵盖了前端开发中的重要知识点,包括浏览器兼容性、异步文件上传、Ajax交互和事件处理等。理解和解决这些问题对于提升老旧浏览器下的用户体验至关...

    jQuery针对IE浏览器低版本测试代码

    4. **DOM操作**:IE低版本可能存在DOM操作的bug,jQuery通过封装的API避免了这些问题。 5. **JSON支持**:IE7及以下版本没有内置的JSON解析和序列化,jQuery提供了相应的处理方式。 在压缩包文件`texiao3868_...

    uploadify.js修复IE9 IE10浏览按钮点击无效的bug

    在某些情况下,尤其是在Internet Explorer(IE)9和10浏览器中,用户可能会遇到一个问题:点击“浏览”按钮后无法选择文件。这个问题是由于Uploadify与IE9和IE10之间的兼容性问题造成的。 在IE9和IE10中,Uploadify...

    jquery IE浏览器版本过低提示.rar

    同时,即使是较新的IE9和IE10,也可能存在某些特定的兼容性问题。 解决IE浏览器版本过低的问题通常涉及以下几个方面: 1. **特征检测**:使用JavaScript进行特征检测,而非浏览器检测。例如,可以检查浏览器是否...

    JEECMS的新浪图集在IE9、10不能显示大图片BUG的解决方法

    1. **代码优化**:检查`heiphoto.js`中的代码,确保其遵循IE9和IE10支持的JavaScript语法。例如,避免使用ES6的新特性,如箭头函数、let/const等。同时,确保所有的DOM操作都使用jQuery或者其他兼容IE的库来完成。 ...

    iebug总结jar包

    "iebug总结jar包"是一个专门针对这些问题的资源集合,它包含了处理IE bug的相关资料,特别是针对IE6的解决方案。以下是基于这个主题的详细知识点: 1. **IE6的渲染引擎**:IE6使用的是Trident渲染引擎,它与现代...

    ie6BUG解决方案

    为了实现透明效果,开发者通常会依赖JavaScript库,如jQuery,或者使用专为IE6设计的滤镜(filter)属性。例如,可以使用以下CSS代码: ```css &lt;!--[if IE 6]&gt; .transparent { filter: progid:DXImageTransform....

    Bootstrap-datetimepicker先天bug修复,兼容IE6+

    1. **CSS兼容性**:IE6及以下版本对CSS的支持非常有限,例如不支持浮动定位、透明度、圆角边框等。因此,需要使用条件注释或者专门针对IE的CSS hack来确保日期时间选择器的样式在旧版IE中正常显示。 2. **...

    Jquery 解决IE6 Select 框总是在图层(div)的上面显示的BUG

    总的来说,尽管IE6的这种行为给开发者带来了困扰,但通过巧妙利用jQuery和iframe,我们仍然能够有效地解决这一问题。不过,随着现代浏览器的普及,对这些老问题的处理逐渐变得不那么重要,但了解这些历史遗留问题...

    自写jQuery插件,实现简单网页遮罩层/弹出层功能,兼容IE6、IE7

    实现弹出网页遮罩层,可兼容IE6/IE7/IE+++等; 缩放浏览器时,内容狂始终居中; 有点小bug,在IE6下,遮罩层颜色没透明,屎黑色,等我有空完善下。

    jquery 内存泄露bug

    5. **更新和修复**:确保jQuery及其插件版本是最新的,以利用修复的bug和改进。 压缩包内的文件 "sIEve-0.0.8.exe" 看起来是一个工具,可能是用于检测IE浏览器中的内存泄漏。sIEve是专门用于Internet Explorer的一...

    帮大家整理了jquery所有版本,我常用的是1.7.2,注意IE8兼容要用2.0以下版本的jquery

    jQuery是一款广泛应用于前端开发的JavaScript库,它极大地简化了JavaScript的DOM操作,事件处理,动画设计和Ajax交互。这个压缩包包含了一系列不同版本的jQuery库,涵盖了从1.7.2到3.5.1等多个版本,这为开发者提供...

    jquery-1.8.3.min.js

    jQuery1.8.2在IE9中调用ajax失败的问题 jQuery1.7.1不能正确地设置IE7中克隆元素的tabindex属性 压缩的JS文件包含非ASCII字符 如果body样式设置为display:none,则$('body')。show()无法工作 在IE9中element.css...

    jquery-easyui-1.4.5-解决了IE6/IE7下无法正常运行的问题

    在jQuery EasyUI 1.4.5版本中,开发者针对IE6和IE7这两个已退役但仍在某些场合使用的浏览器进行了深度优化。修复的问题包括但不限于元素渲染不正确、事件处理失效以及布局混乱等,确保了在这些老版本浏览器中也能...

    IE 9渲染overflow-x的bug及解决

    标题中的“IE 9渲染overflow-x的bug及解决”指的是在Internet Explorer 9浏览器中,当使用CSS属性`overflow-x`来控制元素水平方向上的溢出显示时,可能会遇到一些未预期的问题。`overflow-x`属性是用于指定当内容...

    ie6bug问题解决

    在IT行业中,尤其是在Web开发领域,IE6(Internet Explorer 6)因其众多独特的bug和兼容性问题而闻名。这个压缩包文件"ie6bug"显然专注于解决与IE6相关的技术挑战。下面,我们将深入探讨IE6中的常见问题以及解决策略...

    jquery validate在ie8下的bug解决方法

    由于 `attr()` 是 jQuery 方法,它在 IE8 和其他浏览器中都能正常工作。但是,这样做后,可能还需要确保使用的 jQuery 版本足够新,例如 1.10.2 或更高,以解决 IE7 下可能出现的新问题。 在修复了上述问题之后,...

    兼容IE8的jQuery宽屏幻灯片轮播插件.rar

    兼容IE8的jQuery宽屏幻灯片轮播插件.rar 兼容IE8的jQuery宽屏幻灯片轮播插件.rar 兼容IE8的jQuery宽屏幻灯片轮播插件.rar 兼容IE8的jQuery宽屏幻灯片轮播插件.rar 兼容IE8的jQuery宽屏幻灯片轮播插件.rar 兼容IE8的...

    ie6-10兼容性解决-js.zip

    6. **Function.prototype.call和.apply**:IE6-8在某些情况下对这两个方法的实现有bug,可能需要额外的处理。 7. **CSS3属性**:IE9开始支持一些CSS3属性,但IE6-8则需要特殊的库或脚本来模拟。 8. **...

Global site tag (gtag.js) - Google Analytics