今天在调js的时候,发现firefox和IE在取document.body.offsetHeight的值的时候结果不一样。上网查了一下,发现如下结果:
 

这四种浏览器分别为IE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)。

clientHeight
大家对 clientHeight
都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。

offsetHeight
IE、Opera 认为 offsetHeight =
clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于
clientHeight。

scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度,可以小于
clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度,不过最小值是
clientHeight。

简单地说
clientHeight 就是透过浏览器看内容的这个区域高度。
NS、FF 认为 offsetHeight 和 scrollHeight
都是网页内容高度,只不过当网页内容高度小于等于 clientHeight
时,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于
clientHeight。
IE、Opera 认为 offsetHeight
是可视区域 clientHeight 滚动条加边框。scrollHeight
则是网页内容实际高度。

同理
clientWidth、offsetWidth 和 scrollWidth
的解释与上面相同,只是把高度换成宽度即可。

但是
FF 在不同的 DOCTYPE 中对 clientHeight
的解释不同, xhtml 1 trasitional
中则不是如上解释的。其它浏览器则不存在此问题。

offsetHeight在不同的浏览器下取值不同的更多相关文章

  1. asp.net C# int 类型在32/64位环境下取值范围无变化

    最近在学习中突然想到,我在64位环境下,int取值范围是否有变化?为了检测这个结果,我做了以下这个测试:1.环境:win7旗舰版64位+vs2010 sp1(版本号:10.0.40219.1SP1Re ...

  2. EASYUI combobox firefox 下取值为空的问题或不支持中文检索的问题

    输入中文包含数字 或者全部非中文是没问题的,这个是因为火狐浏览器输入中文输入法的时候 只能触发onkeyup而不能触发onkeydown的问题.而easyui渲染后赋值给隐藏input的过程需要 依赖 ...

  3. 学习笔记 - 深究Bitmap压缩避免OOM的核心inSampleSize的最佳取值

    /** * 测试代码,通过在SDCard根目录放置几种不同大小的图片, 来自动测试压缩方式是否有效同时看是否会内存不够. * * @since * By:AsionTang * At:2014年3月2 ...

  4. loadrunner 脚本优化-参数化之Parameter List参数取值

    脚本优化-参数化之Parameter List参数取值 by:授客 QQ:1033553122 参数取值选项 Select next row Update value on 以上两个选项是改变参数化取 ...

  5. LoadRunner进行参数化的九种方式取值和连接数据库取值

    一.连接mysql数据库取值 1.首先安装odbc驱动 链接: https://pan.baidu.com/s/1WAYd4ygQqIrbB08S01hSkg 提取码: gdfs 2.操作步骤如下图: ...

  6. Loadrunder之脚本篇——参数化取值策略

    参数取值选项 Select next row Update value on 以上两个选项是改变参数化取值的关键选项. Select next row包含如下选项: Sequential:顺序选择 R ...

  7. Jquery操作下拉框(DropDownList)实现取值赋值

    Jquery操作下拉框(DropDownList)想必大家都有所接触吧,下面与大家分享下对DropDownList进行取值赋值的实现代码 1. 获取选中项: 获取选中项的Value值: $('sele ...

  8. Jquery操作下拉框(DropDownList)的取值赋值实现代码(王欢)

    Jquery操作下拉框(DropDownList)的取值赋值实现代码(王欢) 1. 获取选中项: 获取选中项的Value值: $('select#sel option:selected').val() ...

  9. 保留键的情况下取字典中最大的值(max\zip函数的联合使用)

    在我们平常想要获取字典中value最大或者最小的值的时候,常常使用如下函数: testDict = {"age1":18,"age2":20,"age ...

随机推荐

  1. divide two numbers using + opertor

    package testpacknm; import java.util.Scanner; public class testcnm { public static void main(String[ ...

  2. uwsgi异常服务器内存cpu爆满

    记录线上服务器通过linux性能检测工具glances检测到 cpu.内存爆满,且是uwsgi进程占用,对于服务器内核,以及uwsgi配置优化 参考文章 https://blog.csdn.net/o ...

  3. C# HTTP系列3 HttpWebRequest.ContentType属性

    系列目录     [已更新最新开发文章,点击查看详细] 获取或设置请求的 Content-type HTTP 标头的值.默认值为null. 常见的请求内容类型为以下几种: /// <summar ...

  4. Tomcat启用HTTPS协议配置过程

    Article1较为简洁,Article2较为详细,测试可行. Article1 概念简介 Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器,在中小型系统和并发访问 ...

  5. CSS3幸运大转盘最简单的写法

    点击开始 直接css动画 如果你要自己控制转到哪里 那就多写几个class 根据不同角度 运行不同的class..<pre>.zhuandong{ animation: zhuandong ...

  6. 【Oracle】重做undo表空间

    重做undo表空间 场景: alert日志,报了如下错误: [oraprod@arpinfo bdump]$ tail -f alert_PROD.log Errors in file /ora115 ...

  7. 管道的原子性 linux写操作原子性

    从本质上说,管道也是一种文件,但他又和一般的文件有所不同,管道可以克服使用文件进行通信的两个问题 限制管道的大小.实际上,管道是一个固定大小的缓冲区.在Linux中该换冲区的大小为一页,4k 使得他的 ...

  8. Spring Boot Swagger2自动生成接口文档

    一.简介 在当下这个前后端分离的技术趋势下,前端工程师过度依赖后端工程师的接口和数据,给开发带来了两大问题: 1.问题一.后端接口查看难:要怎么调用?参数怎么传递?有几个参数?参数都代表什么含义? 2 ...

  9. javascript时间戳与日期格式的相互转换

    这里总结下JavaScript中时间戳和日期格式的相互转换方法(自定义函数). 将时间戳转换为日期格式 function timestampToTime(timestamp) { var date = ...

  10. C#中的System.Type和System.RuntimeType之间的区别

    string str = string.Empty; Type strType = str.GetType(); Type strTypeType = strType.GetType(); strTy ...