编程 Javascript

各种常用浏览器getBoundingClientRect的解析

Posted in Javascript onMay 21, 2009

先上测试代码

<!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>管理系统</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结果
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.参考文献

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript中的私有/静态属性介绍

Jul 26 Javascript

AngularJS的表单使用详解

Jun 17 Javascript

javascript如何操作HTML下拉列表标签

Aug 20 Javascript

jquery事件与绑定事件

Mar 16 Javascript

Angular中支持SCSS的方法

Nov 18 Javascript

vue移动端弹框组件的实例

Sep 25 Javascript

详解Node.js中path模块的resolve()和join()方法的区别

Oct 29 Javascript

Vue常用的几个指令附完整案例

Nov 06 Javascript

vue + element-ui的分页问题实现

Dec 17 Javascript

深入解析koa之异步回调处理

Jun 17 Javascript

mapboxgl区划标签避让不遮盖实现的代码详解

Jul 01 Javascript

vue项目实现减少app.js和vender.js的体积操作

Nov 12 Javascript

简单的js分页脚本

May 21 #Javascript

input+select(multiple) 实现下拉框输入值

May 21 #Javascript

一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子

May 21 #Javascript

Javascript 兼容firefox的一些问题

May 21 #Javascript

鼠标经过的文本框textbox变色

May 21 #Javascript

jQuery 性能优化指南（3）

May 21 #Javascript

jQuery 性能优化指南（2）

May 21 #Javascript