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. CSS布局 -- 左侧定宽,右侧自适应

    左侧定宽,右侧自适应 有很多种方法可以实现 缩小窗口试试看? 方案一: 左边左浮动,右边加个margin-left 查看 demo <!DOCTYPE html PUBLIC "-// ...

  2. 双系统Ubuntu无法访问windows磁盘分区解决方法

    为了更好的体验各种操作系统,在电脑中安装双系统是很好的选择,但在使用中难免会遇到这样或那样的问题. 最近总是遇到Ubuntu系统下无法访问windows磁盘分区问题,看了系统日志发现是挂载磁盘出问题了 ...

  3. 学习jQuery的事件dblclick

    Insus.NET一直以来都是asp.net的开发的,少使用javascript.现在学习asp.net mvc了,jQuery是一个必须掌握的客户端语言. 不用急,慢慢来.一步一步.这篇练习jQue ...

  4. 很有趣的Java分形绘制

    部分与整体以某种形式相似的形,称为分形. 首先我们举个例子:        我们可以看到西兰花一小簇是整个花簇的一个分支,而在不同尺度下它们具有自相似的外形.换句话说,较小的分支通过放大适当的比例后可 ...

  5. Debian GNU/kFreeBSD是什么

    Debian GNU/kFreeBSD 是由使用GNU C语言库的GNU成员组成的基于FreeBSD内核.外加完整的Debian 软件包集合的操作系统. 它来自Debian社区,所以本质上,我们还是应 ...

  6. 内存分段 && 缓冲区 && 析构函数

    一.内存中的程序: 在进程被载入内存中时,基本上被分成许多小的节,以下是6个主要的节. 低地址                                                   高地 ...

  7. 【iOS】Quartz2D信纸条纹

    一.前导程序 新建一个项目,在主控制器文件中实现以下几行代码,就能轻松的完成图片在视图中的平铺. - (void)viewDidLoad { [super viewDidLoad]; UIImage ...

  8. Python可变参数

    #!/usr/bin/env python # -*- coding: utf-8 -*- import math def calc(*numbers): sum=0 for n in numbers ...

  9. 【GOF23设计模式】模板方法模式

    来源:http://www.bjsxt.com/ 一.[GOF23设计模式]_模板方法模式.钩子函数.方法回调.好莱坞原则 package com.test.templateMethod; publi ...

  10. swift学习笔记之-错误处理

    //错误处理 import UIKit /*错误处理(Error Handling):响应错误以及从错误中恢复的过程 在 Swift 中,错误用符合ErrorType协议的类型的值来表示.这个空协议表 ...