getBoundingClientRect在IE9/10里的bug

getBoundingClientRect可以获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置，最早在IE中实现，后其它浏览器均已实现。

但它在IE9,10中有个bug，当出现垂直滚动条时，获取top总为0。其它浏览器则能正常获取。代码如下

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8"/>

		<title>IE9/10 getBoundingClientRect bug</title>

	</head>

	<body style="height:3000px">

        <p style="margin-top:400px">

		<label>Top：<input id="_bound" type="text"/></label>

        </p>

    	<script>

            var el = document.getElementById('_bound')

            document.onclick = function() {

                var rect = document.documentElement.getBoundingClientRect()

                el.value = rect.top

            }

    	</script>

	</body>

</html>

1. 把body设的较高，以出现垂直滚动条

2. 鼠标向下拖动滚动条大概200px

3. 点击页面任意处，通过getBoundingClientRect获取input元素的top

Firefox/Chrome/Safari/IE11：-212~278

IE9/10：0

点击试试看，可以看到在IE9/10下一直为0

Input Top:

getBoundingClientRect在IE9/10里的bug的更多相关文章

ie9,10 uploadify cleanUp bug
起因:ie多次加载uploadify3.2版本这个组件的时候,出现了SCRIPT5007: 缺少对象． From:http://blog.163.com/xiangfei209@126/blog/s ...
IE9,10中console对象的bug
首先上一段很简单的代码 <!DOCTYPE html> <html> <head> <title></title> <meta htt ...
Cocos2d-JS V3.10 一个小bug提示
感谢读者古事东流反馈,新版V3.10的音乐播放接口存在一个bug. 重复播放一个音乐,会出现音乐停止的状况. debug了一下,发现src的对比有点问题.传入的url是相对路径,但背景bgMusic. ...
jdk 10.0.2 bug修复
之前记录过jdk9+版本的1个bug,某些情况下会导致方法执行二遍,今天早上打开笔记本(mac),弹出一个框提示jdk升级10.0.2,顺手点了一下,然后验证了下该bug,发现居然fix掉了,推荐大家 ...
SWFupload在IE9以上中的bug
这几天在做图片上传的东西,是用swfupload是出现了再IE9下那选择文件的按钮无法点击的情况,在其他浏览器,例如Firefox.chrome都不会出现,后来google一下才发下这算是IE9以上和 ...
Top 10 Open Source Bug Tracking System系统
Bugzilla http://www.bugzilla.org/ Mantis php http://www.mantisbt.org/ Trac Python also provides wiki ...
KBMMW 4.93.10 win64 一个BUG 修正
经常有人提到kbmmw 4.93.10 的64 位版本没有32位版本稳定. 经过官方确认,是delphi 编译器生成64 位代码内存偏移地址的错误. 在kbmMWGlobal.pas 中有一个函数k ...
SWFUpload 在ie9上出现的bug
SWFUpload 在ie9下会出现js错误参考以下几个网址,备忘: http://code.google.com/p/swfupload/issues/detail?id=348 http://c ...
【10.14】Bug Bounty Write-up总结
我很喜欢今天的看到的write-up,因为作者是针对他对一个网站整体进行漏洞挖掘的过程写的,内容包括几个不同的漏洞,从中能够学习到怎样系统性的挖掘漏洞. write-up地址:[Bug bounty ...

随机推荐

C#设计模式——职责链模式(Chain Of Responsibility Pattern)
一.概述在软件开发中,某一个对象的请求可能会被多个对象处理,但每次最多只有一个对象处理该请求,对这类问题如果显示指定请求的处理对象,那么势必会造成请求与处理的紧耦合,为了将请求与处理解耦,我们可以使 ...
C#如何获取CPU处理器核心数量
有几条不同的处理器信息,您可以获得有关的信息:物理处理器数量.核心数量和逻辑处理器数量,这些可以不同.两颗双核超线程(启用)处理器的机器情况下有:2个物理处理器.4个核心和8个逻辑处理器. 逻辑处理器 ...
【转】MSMQ 微软消息队列简单示例
MSMQ它的实现原理是:消息的发送者把自己想要发送的信息放入一个容器中(我们称之为Message),然后把它保存至一个系统公用空间的消息队列(Message Queue)中:本地或者是异地的消息接收程 ...
Python基础：序列
一.概述序列类型(Sequence Types)类似于C中的数组,它是包含一组成员的连续列表,这些成员紧邻排列,并且可以通过序号(下标偏移量)访问其中的一个或多个成员.序列类型的示意图如下所示: P ...
Import-Module ServerManager Import-Module : 未能加载指定的模块“ServerManager”，因为在任何模块目录中都没有找到有效模块文件...(通过Setup Factory调用PowerShell的脚本）
操作系统: Windows server 2008 R2(64位) C:\Windows\System32\WindowsPowerShell\v1.0\Modules 下有ServerManager ...
Array(数组)与Json String (Json字符串) 的相互转换
1.Array转换成Json String function jsonToString(arr) { var s = ""; ...
u-boot移植总结（三）(转)S3C2440对Nand Flash操作和电路原理(基于K9F2G08U0A)
S3C2440对Nand Flash操作和电路原理(基于K9F2G08U0A) 转载自:http://www.cnblogs.com/idle_man/archive/2010/12/23/19153 ...
python 学习之电脑的发展历史
电脑的发展历史电脑的学名叫计算机,电脑是用来做计算的.在古时候,人们最早使用的计算工具可能是手指,英文单词“digit”既有“数字”的意思,又有“手指“的意思.古人用石头打猎,所以还有可能是石头来辅 ...
自定义View_2_关于自定义组合View
自定义View(2) Android当中给我们提供了丰富的UI控件,当然也许满足不了我们的需求,我们就必须学会自定义自己的View,我们怎么算是自定义自己的view呢! 我们会根据原来有的View对V ...
webform（内置对象）
一.内置对象 (一)Response - 响应请求对象1.定义:Response对象用于动态响应客户端请示,控制发送给用户的信息,并将动态生成响应.Response对象只提供了一个数据集合cookie ...

getBoundingClientRect在IE9/10里的bug

getBoundingClientRect在IE9/10里的bug的更多相关文章

随机推荐

热门专题