Heim >Web-Frontend >js-Tutorial >各种常用浏览器getBoundingClientRect的解析_javascript技巧

各种常用浏览器getBoundingClientRect的解析_javascript技巧

WBOY
WBOYOriginal
2016-05-16 18:52:461391Durchsuche

先上测试代码

复制代码 代码如下:




管理系统




<script> <BR>alert(document.getElementById("w3124").getBoundingClientRect().top); <BR></script>



下面是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.参考文献 
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn