快捷導(dǎo)航

各種常用瀏覽器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由于進(jìn)入Quirks模式，此時的值為202，而TheWorld仍為為202
結(jié)論
FF、Chrome、Maxthon為始終堅(jiān)持標(biāo)準(zhǔn)模式（Standards Mode），IE在加了聲明后也進(jìn)入標(biāo)準(zhǔn)模式（Standards Mode），只有TheWorld始終堅(jiān)持Quirks模式，萬惡！
建議
為了兼容把body加上margin:0;padding:0，注意加DOCTYPE聲明（有了它IE還是挺聽話的）
另：
1.通篇用綠色希望大家眼睛能放松些。
2.小弟第一次發(fā)博客，心靈脆弱，無法承受各種打擊，如果有啥不對的，請指正，我一定虛心改正，拍磚請輕一點(diǎn)，謝謝啦
3.參考文獻(xiàn)

您可能感興趣的文章:

相關(guān)文章

JavaScript使用正則表達(dá)式獲取全部分組內(nèi)容的方法示例
這篇文章主要介紹了JavaScript使用正則表達(dá)式獲取全部分組內(nèi)容的方法,結(jié)合實(shí)例形式分析了javascript正則匹配的相關(guān)操作技巧,需要的朋友可以參考下
2017-01-01
在layer彈層layer.prompt中,修改placeholder的實(shí)現(xiàn)方法
今天小編大家分享一篇在layer彈層layer.prompt中,修改placeholder的實(shí)現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
TypeScript中的類型斷言和非空斷言的使用方法
類型斷言是一種方式，可以手動指定變量的類型，非空斷言是一種類型斷言的特殊形式，這篇文章主要給大家介紹TypeScript 中的類型斷言和非空斷言的使用方法,需要的朋友可以參考下
2023-07-07
JavaScript Scoping and Hoisting 翻譯
希望這篇文章能夠給JavaScript程序員最容易困惑的部分一些啟示。我盡力寫的全面，以免引起更多的困惑。如果我寫錯了或是漏掉了某些重要的東西，請一定讓我知道
2012-07-07
EasyUi combotree 實(shí)現(xiàn)動態(tài)加載樹節(jié)點(diǎn)
這篇文章主要介紹了EasyUi combotree 實(shí)現(xiàn)動態(tài)加載樹節(jié)點(diǎn)的相關(guān)資料,需要的朋友可以參考下
2016-04-04
JS對外部文件的加載及對IFRMAME的加載的實(shí)現(xiàn),當(dāng)加載完成后,指定指向方法(方法回調(diào))
callback方法回調(diào)是指當(dāng)某方法執(zhí)行完成后,去自動執(zhí)行指定的另一方法的過程.下面舉兩個代表性的例子,說說JS世界里的方法回調(diào).
2011-07-07
js+div實(shí)現(xiàn)文字滾動和圖片切換效果代碼
這篇文章主要介紹了js+div實(shí)現(xiàn)文字滾動和圖片切換效果代碼,涉及javascript鼠標(biāo)事件及頁面元素圖片滾動效果實(shí)現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-08-08
jquery的$getjson調(diào)用并獲取遠(yuǎn)程的JSON字符串問題
jQuery中常用getJSON來調(diào)用并獲取遠(yuǎn)程的JSON字符串，將其轉(zhuǎn)換為JSON對象，如果成功，則執(zhí)行回調(diào)函數(shù),本文將詳細(xì)介紹，需要的朋友可以參考下
2012-12-12
JavaScript字符串插入、刪除、替換函數(shù)使用示例
本文為大家介紹下JavaScript字符串的插入、刪除、替換函數(shù)的在實(shí)際中的應(yīng)用，想要學(xué)習(xí)的朋友可以參考下哈，希望對初學(xué)者有所幫助
2013-07-07
了解在JavaScript中將值轉(zhuǎn)換為字符串的5種方法
這篇文章主要介紹了在JavaScript中將值轉(zhuǎn)換為字符串的5種方法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，下面小編就和大家一起來學(xué)習(xí)下吧
2019-06-06