各种常用浏览器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中Event属性搜集整理
Sep 17 Javascript
超链接的禁用属性Disabled使用示例
Jul 31 Javascript
JavaScript中最简洁的编码html字符串的方法
Oct 11 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
Mar 25 Javascript
vue的props实现子组件随父组件一起变化
Oct 27 Javascript
js简单实现网页换肤功能
Apr 07 Javascript
Angular 实现输入框中显示文章标签的实例代码
Nov 07 Javascript
element-ui多文件上传的实现示例
Apr 10 Javascript
微信小程序语音同步智能识别的实现案例代码解析
May 29 Javascript
介绍一下28个JS常用数组方法
May 06 Javascript
JS前端轻量fabric.js系列之画布初始化
Aug 05 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
You might like
JavaScript 语法集锦 脚本之家基础推荐
2009/11/15 Javascript
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
juqery 学习之四 筛选查找
2010/11/30 Javascript
JavaScript 代码压缩工具小结
2012/02/27 Javascript
js获取location.href的参数实例代码
2013/08/02 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
关于jQuery判断元素是否存在的问题示例探讨
2014/07/21 Javascript
javascript事件模型实例分析
2015/01/30 Javascript
JavaScript声明变量名的语法规则
2015/07/10 Javascript
JQuery解析XML的方法小结
2016/04/02 Javascript
javascript中的后退和刷新实现方法
2016/11/10 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
基于JavaScript实现淘宝商品广告效果
2017/08/10 Javascript
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
js实现验证码干扰(静态)
2021/02/22 Javascript
Python实现国外赌场热门游戏Craps(双骰子)
2015/03/31 Python
Python进行数据科学工作的简单入门教程
2015/04/01 Python
python结合selenium获取XX省交通违章数据的实现思路及代码
2016/06/26 Python
使用python和Django完成博客数据库的迁移方法
2018/01/05 Python
python 运用Django 开发后台接口的实例
2018/12/11 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
python用opencv完成图像分割并进行目标物的提取
2020/05/25 Python
python 字符串格式化的示例
2020/09/21 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
资产评估专业大学生求职信
2013/09/29 职场文书
学习委员自我鉴定
2014/01/13 职场文书
市政工程技术专业自荐书
2014/07/06 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
项目经理岗位职责
2015/01/31 职场文书
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers