各種常用瀏覽器getBoundingClientRect的解析
更新時間：2009年05月21日 22:51:33 作者：
getBoundingClientRect
先上測試代碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>管理系統(tǒng)</title>
</head>
<body style="" onselectstart="return false;" ><!--7699c7-->
<div id="w3124" style="border:1px solid #ff0000;position:relative;top:200px;left:400px;width:400px;">
</div>
<SCRIPT>
alert(document.getElementById("w3124").getBoundingClientRect().top);
</SCRIPT>
</body>
</html>
下面是alert結(jié)果
IE、FF、Chrome:208
IE內(nèi)核的Maxthon:215
IE內(nèi)核的TheWorld:217
當(dāng)body加上margin:0;padding:0 的時候IE、FF、Chrome、Maxthon下均為200,而只有TheWorld為202
然后把HTML代碼頭部的DOCTYPE聲明去掉的時候FF、Chrome、Maxthon值均為200，而IE由于進入Quirks模式，此時的值為202，而TheWorld仍為為202
結(jié)論
FF、Chrome、Maxthon為始終堅持標(biāo)準(zhǔn)模式（Standards Mode），IE在加了聲明后也進入標(biāo)準(zhǔn)模式（Standards Mode），只有TheWorld始終堅持Quirks模式，萬惡！
建議
為了兼容把body加上margin:0;padding:0，注意加DOCTYPE聲明（有了它IE還是挺聽話的）
另：
1.通篇用綠色希望大家眼睛能放松些。
2.小弟第一次發(fā)博客，心靈脆弱，無法承受各種打擊，如果有啥不對的，請指正，我一定虛心改正，拍磚請輕一點，謝謝啦
3.參考文獻
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>管理系統(tǒng)</title>
</head>
<body style="" onselectstart="return false;" ><!--7699c7-->
<div id="w3124" style="border:1px solid #ff0000;position:relative;top:200px;left:400px;width:400px;">
</div>
<SCRIPT>
alert(document.getElementById("w3124").getBoundingClientRect().top);
</SCRIPT>
</body>
</html>
下面是alert結(jié)果
IE、FF、Chrome:208
IE內(nèi)核的Maxthon:215
IE內(nèi)核的TheWorld:217
當(dāng)body加上margin:0;padding:0 的時候IE、FF、Chrome、Maxthon下均為200,而只有TheWorld為202
然后把HTML代碼頭部的DOCTYPE聲明去掉的時候FF、Chrome、Maxthon值均為200，而IE由于進入Quirks模式，此時的值為202，而TheWorld仍為為202
結(jié)論
FF、Chrome、Maxthon為始終堅持標(biāo)準(zhǔn)模式（Standards Mode），IE在加了聲明后也進入標(biāo)準(zhǔn)模式（Standards Mode），只有TheWorld始終堅持Quirks模式，萬惡！
建議
為了兼容把body加上margin:0;padding:0，注意加DOCTYPE聲明（有了它IE還是挺聽話的）
另：
1.通篇用綠色希望大家眼睛能放松些。
2.小弟第一次發(fā)博客，心靈脆弱，無法承受各種打擊，如果有啥不對的，請指正，我一定虛心改正，拍磚請輕一點，謝謝啦
3.參考文獻
您可能感興趣的文章:
- Firefox getBoxObjectFor getBoundingClientRect聯(lián)系
- javascript getBoundingClientRect() 來獲取頁面元素的位置的代碼[修正版]
- javascript 獲取元素位置的快速方法 getBoundingClientRect()
- js getBoundingClientRect() 來獲取頁面元素的位置
- 獲取元素距離瀏覽器周邊的位置的方法getBoundingClientRect
- 使用Sticky組件實現(xiàn)帶sticky效果的tab導(dǎo)航和滾動導(dǎo)航的方法
- 淺談Sticky組件的改進實現(xiàn)
- 使用getBoundingClientRect方法實現(xiàn)簡潔的sticky組件的方法
相關(guān)文章
js可以利用dom非常輕松的就可以遍歷一個表格。當(dāng)然只要是dom中有的所有對象都可以通過js來訪問和處理2013-07-07
webpack4 配置 ssr 環(huán)境遇到“document is not defined”
這篇文章主要介紹了webpack4 配置 ssr 環(huán)境遇到“document is not defined”，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
本文由簡入深，詳細介紹了javascript的函數(shù)問題，非常的詳盡，非常的實用，這里推薦給大家，是篇不可多得的文章2015-02-02
用Javascript檢查Adobe PDF插件是否安裝的實現(xiàn)代碼
用Javascript檢查Adobe PDF插件是否安裝的代碼2009-12-12
這篇文章主要給大家介紹了關(guān)于微信小程序前端自定義分享的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
for循環(huán)對大家來說都不陌生，下面這篇文章主要給大家介紹了關(guān)于如何在js代碼中消滅for循環(huán)的相關(guān)資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
這篇文章主要為大家詳細介紹了javascript實現(xiàn)簡單打字游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
微信小程序scroll-view實現(xiàn)左右聯(lián)動
這篇文章主要為大家詳細介紹了微信小程序scroll-view實現(xiàn)左右聯(lián)動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
今天小編就為大家分享一篇layui table設(shè)置某一行的字體顏色方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
微信小程序?qū)崿F(xiàn)獲取用戶信息替換用戶名和頭像到首頁
本文詳細講解了微信小程序?qū)崿F(xiàn)獲取用戶信息替換用戶名和頭像到首頁的方法，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06