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:

相关：

http://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx

http://developer.mozilla.org/en/docs/DOM:element.getBoundingClientRect

http://ejohn.org/blog/getboundingclientrect-is-awesome/

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

  1. ie9,10 uploadify cleanUp bug

    起因:ie多次加载uploadify3.2版本这个组件的时候,出现了SCRIPT5007: 缺少对象．  From:http://blog.163.com/xiangfei209@126/blog/s ...

  2. IE9,10中console对象的bug

    首先上一段很简单的代码 <!DOCTYPE html> <html> <head> <title></title> <meta htt ...

  3. Cocos2d-JS V3.10 一个小bug提示

    感谢读者古事东流反馈,新版V3.10的音乐播放接口存在一个bug. 重复播放一个音乐,会出现音乐停止的状况. debug了一下,发现src的对比有点问题.传入的url是相对路径,但背景bgMusic. ...

  4. jdk 10.0.2 bug修复

    之前记录过jdk9+版本的1个bug,某些情况下会导致方法执行二遍,今天早上打开笔记本(mac),弹出一个框提示jdk升级10.0.2,顺手点了一下,然后验证了下该bug,发现居然fix掉了,推荐大家 ...

  5. SWFupload在IE9以上中的bug

    这几天在做图片上传的东西,是用swfupload是出现了再IE9下那选择文件的按钮无法点击的情况,在其他浏览器,例如Firefox.chrome都不会出现,后来google一下才发下这算是IE9以上和 ...

  6. Top 10 Open Source Bug Tracking System系统

    Bugzilla http://www.bugzilla.org/ Mantis php http://www.mantisbt.org/ Trac Python also provides wiki ...

  7. KBMMW 4.93.10 win64 一个BUG 修正

    经常有人提到kbmmw 4.93.10 的64 位版本没有32位版本稳定. 经过官方确认,是delphi 编译器生成64 位代码内存偏移地址的错误. 在kbmMWGlobal.pas 中 有一个函数k ...

  8. SWFUpload 在ie9上出现的bug

    SWFUpload 在ie9下会出现js错误 参考以下几个网址,备忘: http://code.google.com/p/swfupload/issues/detail?id=348 http://c ...

  9. 【10.14】Bug Bounty Write-up总结

    我很喜欢今天的看到的write-up,因为作者是针对他对一个网站整体进行漏洞挖掘的过程写的,内容包括几个不同的漏洞,从中能够学习到怎样系统性的挖掘漏洞. write-up地址:[Bug bounty ...

随机推荐

  1. Brute Force & STL --- UVA 146 ID Codes

     ID Codes  Problem's Link:http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&a ...

  2. Linq专题之查询操作

    前面我们主要讲解的是Linq的查询表达式,Linq不但提供了一些基本的查询表达式,还提供了数十个查询操作.比如筛选操作.聚合操作.投影操作等等.通过这些查询操作可以更方便的对数据源进行处理. Linq ...

  3. 自定义ConfigurationSection，创建多个嵌套的ConfigurationElementCollection节点

    由于接口地址都是固定的,所以想到使用自定义节点,来将接口都配置到web.config中. 很快,v1.0版本出炉: public class RequestConfigSection : Config ...

  4. enum to IEnumerable<T>

    想foreach一个枚举,发觉它特别复杂,因此先把枚举转换为IEnumerable接口之后,简单多了.下面是枚举(enum)转换为IEnumerable接口方法: 使用:修改这篇<程序一旦发觉写 ...

  5. Winform开发框架之权限管理系统改进的经验总结（4）-一行代码实现表操作日志记录

    在前面介绍了几篇关于我的权限系统改进的一些经验总结,本篇继续这一系列主体,介绍如何一行代码实现重要表的操作日志记录.我们知道,在很多业务系统里面,数据是很敏感的,特别对于一些增加.修改.删除等关键的操 ...

  6. 第一个app.总结

    前记: 最近想整点外快,但是又没啥子技术,唉,学了一下android,想写点游戏啥的,,唉,可惜,美工,UI始终不行,代码也勉勉强强... 不过总的来说也是收获参半吧,也是有一些新的知识学到了嘛,至少 ...

  7. 为阿里云存储开发的PHP PEAR 包：Services_Aliyun_OSS

    阿里云开放存储服务 OSS:用于存储图片.apk等静态资源,使用阿里云带宽,不占用开发者服务器带宽. 阿里云官方PHP SDK: http://aliyun.com/product/oss/#help ...

  8. MUI - 图片预览（perviewimage）的优化

    主要对mui图片全屏预览插件做了以下三点补充 1.添加了预览图片文字说明,使用的时候需要添加以下css及DOM属性 .mui-slider-img-content { position: absolu ...

  9. SAPScript、Smartforms动态打印图像或者背景图片

    在利用 SMARTFORMS 进行打印的时候有时候要求输出的图片可能是随着打印内容的不同而不同了,也就是动态输出图片,SMARTFORMS的提供了相关的支持技术,下面是实现截图 1.创建要显示的图片 ...

  10. while循环语句的使用

    说明:先判断表达式,后执行语句,while循环称为当型循环. 如果指定的条件为真(表达式为非0)时,执行while语句中的内嵌语句. 格式:while (表达式)   //判断括号内表达式 真(tru ...