getBoundingClientRect在IE9/10里的bug

秒速五厘米 2022-03-31 04:16 361阅读 0赞

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][IE]

[http://developer.mozilla.org/en/docs/DOM:element.getBoundingClientRect][http_developer.mozilla.org_en_docs_DOM_element.getBoundingClientRect]

[http://ejohn.org/blog/getboundingclientrect-is-awesome/][http_ejohn.org_blog_getboundingclientrect-is-awesome]

[IE]: http://msdn.microsoft.com/en-us/library/ms536433%28VS.85%29.aspx
[http_developer.mozilla.org_en_docs_DOM_element.getBoundingClientRect]: http://developer.mozilla.org/en/docs/DOM:element.getBoundingClientRect
[http_ejohn.org_blog_getboundingclientrect-is-awesome]: http://ejohn.org/blog/getboundingclientrect-is-awesome/

发表评论取消回复

表情：

评论列表（有 0 条评论，361人围观）

还没有评论，来说两句吧...

相关阅读

相关 IE6 BUG

先来看html代码： <ul> <li><a href=""><img src="images/k.gif" />第六届中国国际教育装备科技创新峰会</a></li>

╰半夏微凉°/ 2024年02月17日 14:06/ 0 赞/ 57 阅读

相关 IE常见的CSS的BUG（二）

　　之前介绍过IE浏览器的几种BUG解决的方法，今天我们继续研究IE的BUG。尽管IE6即将被淘汰，但是了解这些也对将来解决问题也是有一定帮助的。好了，闲话不多说，咱们继续看I

谁践踏了优雅/ 2022年12月06日 15:50/ 0 赞/ 154 阅读

相关 placeholder在ie浏览器里不显示的问题解决

placeholder在ie浏览器里不显示的问题解决参考文章： [（1）placeholder在ie浏览器里不显示的问题解决][1_placeholder_ie] （2

- 日理万妓/ 2022年09月05日 04:28/ 0 赞/ 212 阅读

相关 axios 在IE瀏覽器存在的Bug

參考:[https://blog.csdn.net/zhouzhenchina/article/details/77686320][https_blog.csdn.net_zh

我就是我/ 2022年04月05日 13:11/ 0 赞/ 195 阅读

相关 getBoundingClientRect在IE9/10里的bug

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

秒速五厘米/ 2022年03月31日 04:16/ 0 赞/ 362 阅读

相关 js getBoundingClientRect()

> getBoundingClientRect() > > 这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面

左手的ㄟ右手/ 2022年02月22日 20:33/ 0 赞/ 249 阅读

相关 ie6 bug详谈

一、双外边距浮动bug .left{ float:left; margin-left:20px; } //wrong 此left在ie6下的左

短命女/ 2022年01月06日 06:19/ 0 赞/ 248 阅读

相关 js的getBoundingClientRect()

getBoundingClientRect()：获取元素位置，该方法没有参数。 <div id="box"></div> var object=do

布满荆棘的人生/ 2021年12月11日 20:49/ 0 赞/ 338 阅读

相关 vue里router-link在IE里的兼容

还是IE的兼容，在IE浏览器中，router-link的跳转是失效的，主要是因为当url的hash变化的时候，浏览器没有做出相应的反应。这时候需要当浏览器是IE的时候手动给ur

蔚落/ 2021年09月20日 02:48/ 0 赞/ 426 阅读

相关 getBoundingClientRect() 方法

getBoundingClientRect() 方法 JavaScript对dom操作的所有方法使用方式都是非常简单的。难点在于理解此方法具体的作用什么，如果了解它的实...

红太狼/ 2020年05月26日 15:41/ 0 赞/ 780 阅读