各種常用瀏覽器getBoundingClientRect的解析_javascript技巧
來源：懂視網
責編：小采
時間：2020-11-27 20:42:54
各種常用瀏覽器getBoundingClientRect的解析_javascript技巧
各種常用瀏覽器getBoundingClientRect的解析_javascript技巧:先上測試代碼 代碼如下: 管理系統 alert(document.getElementById(w3124).getBoundingClientRect().top); 下面是alert結果 IE、FF、Chrome:208 IE內核的Maxthon:215 IE內核的TheWorld:217 當body加上
導讀各種常用瀏覽器getBoundingClientRect的解析_javascript技巧:先上測試代碼 代碼如下: 管理系統 alert(document.getElementById(w3124).getBoundingClientRect().top); 下面是alert結果 IE、FF、Chrome:208 IE內核的Maxthon:215 IE內核的TheWorld:217 當body加上
先上測試代碼
代碼如下:
管理系統 下面是alert結果
IE、FF、Chrome:208
IE內核的Maxthon:215
IE內核的TheWorld:217
當body加上margin:0;padding:0 的時候IE、FF、Chrome、Maxthon下均為200,而只有TheWorld為202
然后把HTML代碼頭部的DOCTYPE聲明去掉的時候FF、Chrome、Maxthon值均為200，而IE由于進入Quirks模式，此時的值為202，而TheWorld仍為為202
結論
FF、Chrome、Maxthon為始終堅持標準模式（Standards Mode），IE在加了聲明后也進入標準模式（Standards Mode），只有TheWorld始終堅持Quirks模式，萬惡！
建議
為了兼容把body加上margin:0;padding:0，注意加DOCTYPE聲明（有了它IE還是挺聽話的）
另：
1.通篇用綠色希望大家眼睛能放松些。
2.小弟第一次發博客，心靈脆弱，無法承受各種打擊，如果有啥不對的，請指正，我一定虛心改正，拍磚請輕一點，謝謝啦
3.參考文獻
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
各種常用瀏覽器getBoundingClientRect的解析_javascript技巧
各種常用瀏覽器getBoundingClientRect的解析_javascript技巧:先上測試代碼 代碼如下: 管理系統 alert(document.getElementById(w3124).getBoundingClientRect().top); 下面是alert結果 IE、FF、Chrome:208 IE內核的Maxthon:215 IE內核的TheWorld:217 當body加上
