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. 可拖拽的ListBox

    之前在写播放器的时候,遇到了一个问题,现在播放器无论是千千,KuGoo还是比较原始的MediaPlayer,它们的播放表都是可以拖拽的,直接把文件拖到播放表实现歌曲的添加那个先暂且不说,光是播放表里面 ...

  2. CSS3动画基本的转换和过渡

    理论知识不扎实,在一定程度上能体现你解决问题的能力.今天我们拿CSS3动画来说,简单回忆下他的一些基本属性,这些我们在平常应用中会经常用到. 常用动画属性: transform:translate(x ...

  3. MVVM(Model-View-View-Model)简单分析（及代码示例）

    项目组,现在用的MVVM(Model-View-View-Model)模式,搞了一个多月,感觉有点明白了.

  4. csharp:asp.net Importing or Exporting Data from Worksheets using aspose cell

    using System; using System.Data; using System.Configuration; using System.Collections; using System. ...

  5. sql 执行时间

    SET STATISTICS PROFILE ON SET STATISTICS IO ON SET STATISTICS TIME ON --GO /*--你的SQL脚本开始*/SELECT * F ...

  6. MySQL Query Profile

    MySQL Query Profiler, 可以查询到此 SQL 语句会执行多少, 并看出 CPU/Memory 使用量, 执行过程 System lock, Table lock 花多少时间等等.从 ...

  7. EffectiveJava——用函数对象表示策略

    有些语言支持函数指针.代理.lambda表达式,或者支持类似的机制,允许程序把“调用特殊函数的能力”储存起来并传递这种能力.这种机制通常用于允许函数的调用者通过传入第二个函数,来指定自己的行为.比较器 ...

  8. [小北De编程手记] : Lesson 07 - Selenium For C# 之 窗口处理

    在实际的自动化测试过程中,我们会遇见许多需要对窗口进行处理的情况.比如,点击删除某条信息的时候系统会显示一个Alert框.或者点击某个超链接时会在浏览器中打开一个新的页面.这一篇,来和大家分享一下Se ...

  9. Cookies简介和使用

    Cookie public class javax.servlet.http.Cookie  1作用(1)Cookie能使站点跟踪特定访问者的访问次数.最后访问时间和访问者进入站点的路径(2)Cook ...

  10. Play Framework介绍:控制器层

    业务逻辑代码通常位于模型(model)层.客户端(比如浏览器)无法直接调用其中的代码,所以模型对象提供的功能,必须作为资源以URI方式暴露给外部. 客户端使用HTTP协议来操作这些资源,从而调用了内部 ...