各种常用浏览器getBoundingClientRect的解析

先上测试代码


代码如下:

<!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.参考文献

赞 (0)

相关推荐

  • javascript 获取元素位置的快速方法 getBoundingClientRect()

    它返回一个对象,其中包含了left.right.top.bottom四个属性,分别对应了该元素的左上角和右下角相对于浏览器窗口(viewport)左上角的距离. 所以,网页元素的相对位置就是 var X= this.getBoundingClientRect().left; var Y =this.getBoundingClientRect().top; 再加上滚动距离,就可以得到绝对位置 var X= this.getBoundingClientRect().left+document.doc

  • Firefox getBoxObjectFor getBoundingClientRect联系

    在一个含有Flash的网页中插入Flash会提示: 警告: 不建议使用 getBoxObjectFor() . 请使用 element.getBoundingClientRect(). 经本人测试,确实是Firefox在含flash的网页上提示,还不知道原因,也没找到解决办法. Firefox版本:3.0.3 Flash: 10.0 html页面代码: 复制代码 代码如下: <html> <body> <object type="application/x-shoc

  • js getBoundingClientRect() 来获取页面元素的位置

    js getBoundingClientRect() 来获取页面元素的位置

    document.documentElement.getBoundingClientRect 下面这是MSDN的解释: Syntax oRect = object.getBoundingClientRect() Return Value Returns a TextRectangle object. Each rectangle has four integer properties (top, left, right, and bottom) that represent a coordina

  • javascript getBoundingClientRect() 来获取页面元素的位置的代码[修正版]第1/2页

    javascript getBoundingClientRect() 来获取页面元素的位置的代码[修正版]第1/2页

    document.documentElement.getBoundingClientRect下面这是MSDN的解释: Syntax oRect = object.getBoundingClientRect()Return Value Returns a TextRectangle object. Each rectangle has four integer properties (top, left, right, and bottom) that represent a coordinate

  • 浅谈Sticky组件的改进实现

    浅谈Sticky组件的改进实现

    在上一篇文章使用getBoundingClientRect方法实现简洁的sticky组件的方法介绍了一个sticky组件的简洁实现,经过这两天的思考,发现上次提供的实现还有较多不足的地方,另外跟别的网站上实现的效果在取消固定的时候也有一些不同,上次提供的取消固定的处理方式不好,本文在上文的基础上,提供一个改进版的sticky组件,功能更加完善,希望您有兴趣阅读. 1. 旧版本的问题 上一个sticky组件的实现中,有多个问题存在: 第一,从sticky的效果上来说,sticky元素在固定前后,不

  • 使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法

    使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法

    sticky组件,通常应用于导航条或者工具栏,当网页在某一区域滚动的时候,将导航条或工具栏这类元素固定在页面顶部或底部,方便用户快速进行这类元素提供的操作. 在这篇文章Sticky组件的改进实现提供了一个改进版的sticky组件,并将演示效果应用到了自己的博客.有了类似sticky的这种简单组件,我们就可以在利用它开发更丰富的效果,比如本文要介绍的tab导航和滚动导航.实现简单,演示效果如下: tab导航(对应tab-sticky.html): 滚动导航(对应nav-scroll-sticky.

  • 获取元素距离浏览器周边的位置的方法getBoundingClientRect

    复制代码 代码如下: var box = document.getElementById( "gaga1" ); /* alert( box.getBoundingClientRect().top ); alert( box.getBoundingClientRect().right ); alert( box.getBoundingClientRect().bottom ); alert( box.getBoundingClientRect().left ) */ function

  • 使用getBoundingClientRect方法实现简洁的sticky组件的方法

    使用getBoundingClientRect方法实现简洁的sticky组件的方法

    sticky组件,通常应用于导航条或者工具栏,当网页在某一区域滚动的时候,将导航条或工具栏这类元素固定在页面顶部或底部,方便用户快速进行这类元素提供的操作.本文介绍这种组件的实现思路,并提供一个同时支持将sticky元素固定在顶部或底部的具体实现,由于这种组件在网站中非常常见,所以有必要掌握它的实现方式,以便在有需要的时候基于它的思路写出功能更多的组件出来. 固定在顶部的demo效果(对应sticky-top.html): 固定在底部的demo效果(对应sticky-bottom.html):

  • 各种常用浏览器getBoundingClientRect的解析

    先上测试代码 复制代码 代码如下: <!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" />

  • JavaScript 浏览器兼容性总结及常用浏览器兼容性分析

    本文是我们小编日常整理些关于js兼容性问题,及IE与Firefox等常用浏览器的兼容性分析,对js浏览器兼容性相关知识感兴趣的朋友一起学习吧! 1. children与childNodes IE提供的children.childNodes和firefox下的childNodes的行为是有区别的,firefox下childNodes会把换行和空白字符都算作父节点的子节点,而IE的childNodes和children不会.比如: <div id="dd"> <div&g

  • java常用数据流应用实例解析

    这篇文章主要介绍了java常用数据流应用实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 按操作单位的不同分为:字节流(8bit)(InputStream.OuputStream).字符流(16bit)(Reader.Writer) 按数据流的流向不同分为:输入流.输出流 按角色的不同分为:节点流.处理流 一.不带缓冲的流 1.文件字节输入流.文件字节输出流 package anno; import java.io.File; impor

  • golang常用库之配置文件解析库-viper使用详解

    golang常用库:gorilla/mux-http路由库使用 golang常用库:配置文件解析库-viper使用 golang常用库:操作数据库的orm框架-gorm基本使用 golang常用库:字段参数验证库-validator使用 一.viper简介 viper 配置管理解析库,是由大神 Steve Francia 开发,他在google领导着 golang 的产品开发,他也是 gohugo.io 的创始人之一,命令行解析库 cobra 开发者.总之,他在golang领域是专家,很牛的一个

  • JavaScript如何通过userAgent判断几个常用浏览器详解

    前言 通常在做h5页面的时候需要在微信.QQ.微博等生态内做一些引流的工作,但引流时受限于这些平台.比如上次的文章<h5唤醒app实现以及注意点>就是妥协的一个办法,那么常用的这几个浏览器的User Agent什么样呢?如何判断呢?今天就具体来看看这个问题. User Agent定义 User Agent中文名为用户代理,简称 UA,它是一个特殊字符串头,使得服务器能够识别客户使用的操作系统及版本.CPU 类型.浏览器及版本.浏览器渲染引擎.浏览器语言.浏览器插件等.---来自百度百科 从这句

  • Java常用集合与原理解析

    Java常用集合与原理解析

    目录 迭代器 集合框架中的接口 具体集合 散列码 树集 队列 优先队列 映射 基本映射 映射视图 弱散列映射 链接散列集合映射 枚举集与映射 标识散列映射 Java 最初版本只为常用的数据结构提供了很少的一组类:Vector.Stack.Hashtable.BitSet 与 Enumeration 接口 迭代器 public interface Collection<E> { boolean add(E element); Iterator<E> iterator(); ... }

  • tinyxml 常用的C++ XML解析器非常优秀

    读取和设置xml配置文件是最常用的操作,试用了几个C++的XML解析器,个人感觉TinyXML是使用起来最舒服的,因为它的API接口和Java的十分类似,面向对象性很好. TinyXML是一个开源的解析XML的解析库,能够用于C++,能够在Windows或Linux中编译.这个解析库的模型通过解析XML文件,然后在内存中生成DOM模型,从而让我们很方便的遍历这棵XML树. DOM模型即文档对象模型,是将整个文档分成多个元素(如书.章.节.段等),并利用树型结构表示这些元素之间的顺序关系以及嵌套包

  • 实例分析浏览器中“JavaScript解析器”的工作原理

    浏览器在读取HTML文件的时候,只有当遇到<script>标签的时候,才会唤醒所谓的"JavaScript解析器"开始工作. JavaScript解析器工作步骤: 1."找一些东西": var. function. 参数:(也被称之为预解析) 备注:如果遇到重名分为以下两种情况: 遇到变量和函数重名了,只留下函数 遇到函数重名了,根据代码的上下文顺序,留下最后一个 2.逐行解读代码. 备注:表达式可以修改预解析的值 JS解析器在执行第一步预解析的时候,会

  • Python基础常用内建函数图文示例解析

    Python基础常用内建函数图文示例解析

    目录 abs() all() any() bin() bool() callable() abs() 返回一个数字的绝对值,它的参数可以是整数或者浮点数.举个例子: all() 参数为一个可迭代对象,如果该可迭代对象所有元素的真值都为True(或者可迭代对象为空),则返回True.它等价于: 举个例子: any() 和all()函数相对应,如可迭代对象所有元素中只要有一个元素真值为True,那么就返回True,如果这个可迭代对象是空的,则返回True.它等价于: 举个例子: bin() 将整数转

  • Nodejs中Express 常用中间件 body-parser 实现解析

    写在前面 body-parser是非常常用的一个express中间件,作用是对post请求的请求体进行解析.使用非常简单,以下两行代码已经覆盖了大部分的使用场景. app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); 本文从简单的例子出发,探究body-parser的内部实现.至于body-parser如何使用,感兴趣的同学可以参考官方文档. 入门基础 在正式讲解前,我们先来看一个POST

随机推荐