编程 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 30 Javascript

一款js和css代码压缩工具[附JAVA环境配置方法]

Apr 16 Javascript

JavaScript全局函数使用简单说明

Mar 11 Javascript

用原生JavaScript实现jQuery的$.getJSON的解决方法

May 03 Javascript

JQuery实现点击div以外的位置隐藏该div窗口

Sep 13 Javascript

JS获取键盘上任意按键的值(实例代码)

Nov 12 Javascript

浅谈页面装载js及性能分析方法

Dec 09 Javascript

JS模拟bootstrap下拉菜单效果实例

Jun 17 Javascript

javascript定时器取消定时器及优化方法

Jul 08 Javascript

ajax前台后台跨域请求处理方式

Feb 08 Javascript

微信小程序下拉框功能的实例代码

Nov 06 Javascript

axios实现简单文件上传功能

Sep 25 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