页面需要嵌套在跨域的iframe中，而页面高度不固定，需要每个页面把自己的高度获得后，通过js通知iframe调整显示。

而页面在获得自己的高度时，发现总是比预想的大。经过参考别人的博客，发现原来是w3c标准的原因。

也就是要在<html>前面加上<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

加上之后，document.documentElement.scrollHeight在IE和Chrome下，可以正常取到合适的全文高度，但是firefox下取到的则过高；用document.body.scrollHeight取则恰好相反。

因此最后采用了Math.min(document.documentElement.scrollHeight,document.body.scrollHeight)获得最小高度，正常。

但是加上W3C标准后，画面也出现了一些小的不同，比如页面的行间距，似乎IE的就要短一些，有些地方重合了。而且css也会严格区分大小写。

参考博客url：

http://jianzhong5137.blog.163.com/blog/static/98290492011522202281/

内容：

js获取页面高度

2011-06-02 14:20:02|  分类：JavaScript |  标签：body  document  clientwidth  宽度  页面高度  |字号大中小 订阅

 
 
<script> 
function getInfo() 
{ 
var s = ""; 
s += " 网页可见区域宽："+ document.body.clientWidth; 
s += " 网页可见区域高："+ document.body.clientHeight; 
s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)"; 
s += " 网页可见区域高："+ document.body.offsetHeight + " (包括边线的宽)"; 
s += " 网页正文全文宽："+ document.body.scrollWidth; 
s += " 网页正文全文高："+ document.body.scrollHeight; 
s += " 网页被卷去的高(ff)："+ document.body.scrollTop; 
s += " 网页被卷去的高(ie)："+ document.documentElement.scrollTop; 
s += " 网页被卷去的左："+ document.body.scrollLeft; 
s += " 网页正文部分上："+ window.screenTop; 
s += " 网页正文部分左："+ window.screenLeft; 
s += " 屏幕分辨率的高："+ window.screen.height; 
s += " 屏幕分辨率的宽："+ window.screen.width; 
s += " 屏幕可用工作区高度："+ window.screen.availHeight; 
s += " 屏幕可用工作区宽度："+ window.screen.availWidth; 
s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色"; 
s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸"; 
//alert (s); 
} 
getInfo(); 
< /script> 
在我本地测试当中： 
在IE、FireFox、Opera下都可以使用 
document.body.clientWidth 
document.body.clientHeight 
即可获得，很简单，很方便。 
而在公司项目当中： 
Opera仍然使用 
document.body.clientWidth 
document.body.clientHeight 
可是IE和FireFox则使用 
document.documentElement.clientWidth 
document.documentElement.clientHeight 
原来是W3C的标准在作怪啊 
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果在页面中添加这行标记的话

在IE中： 
document.body.clientWidth ==> BODY对象宽度 
document.body.clientHeight ==> BODY对象高度 
document.documentElement.clientWidth ==> 可见区域宽度 
document.documentElement.clientHeight ==> 可见区域高度 
在FireFox中： 
document.body.clientWidth ==> BODY对象宽度 
document.body.clientHeight ==> BODY对象高度 
document.documentElement.clientWidth ==> 可见区域宽度 
document.documentElement.clientHeight ==> 可见区域高度 
? 
在Opera中： 
document.body.clientWidth ==> 可见区域宽度 
document.body.clientHeight ==> 可见区域高度 
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽） 
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高） 
而如果没有定义W3C的标准，则 
IE为： 
document.documentElement.clientWidth ==> 0 
document.documentElement.clientHeight ==> 0 
FireFox为： 
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
Opera为： 
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
真是一件麻烦事情，其实就开发来看，宁可少一些对象和方法，不使用最新的标准要方便许多啊。

 

html页面高度不同浏览器兼容性设置的更多相关文章

  1. 响应式布局中重要的meta标签设置.适用于手机浏览器兼容性设置

    <!-- #手机浏览器兼容性设置 -->    <meta content="application/xhtml+xml;charset=UTF-8" http- ...

  2. 页面title改变浏览器兼容性问题

    前一阵子客户在界面上改了下小小的需求,需要点不同的文章title显示不同的模块名称(之前没有区分,统一叫新闻图片),很简单的一个需求但是测试的时候并没有注意到不兼容IE7和IE8.在客户那被尴尬的发现 ...

  3. HTML`CSS_网站页面不同浏览器兼容性问题解决

    目前,最为流行的浏览器共有五个:分别是ie,Edge浏览器(属于微软),火狐,谷歌(chrome)Safari和Opera五大浏览器. Trident内核:IE ,360,,猎豹,百度: Gecko内 ...

  4. CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  5. Web前端页面的浏览器兼容性测试心得（二）搭建原汁原味的IE8测试环境

    如果你做的页面被老板或PM要求兼容IE8,你就值得同情了.IE8不支持HTML5,在2017年的前端界,开发者不涉及HTML5标准简直寸步难行.然而,有一个可怕的事实客观存在,那就是IE8是Win7系 ...

  6. 网页页面NULL值对浏览器兼容性的影响

    网页页面NULL值对浏览器兼容性的影响       近期做项目中一个页面中的input radio出现浏览器兼容性问题. 主要问题: 在谷歌浏览器,360急速模式和搜狗急速模式中给radio初始动态赋 ...

  7. 获取iframe子页面内容高度给iframe动态设置高度

    <!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta nam ...

  8. CSS 多浏览器兼容性问题及解决方案

    兼容性处理要点1.DOCTYPE 影响 CSS 处理 2.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 ...

  9. css不同浏览器兼容性调试 --- 转自: [http://wo.115.com/?ct=detail&id=31733&bid=1018841]

    css不同浏览器兼容性调试 IE6.0,IE7.0与Firefox的CSS兼容性问题1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right ...

随机推荐

  1. cocos2d-x设计模式发掘之五：防御式编程模式

    http://www.ityran.com/archives/2105 本文由子龙山人原创,泰然授权转载,转载请注明出处并通知子龙山人! 声明:防御式编程是提高程序代码质量的一种手段,它不能算是真正意 ...

  2. javaHDU1003Max Sum

    import java.util.Scanner;  public class Sum  {public static void main(String args[])  {Scanner cin=n ...

  3. 从源码角度深入理解Toast

    Toast这个东西我们在开发中经常用到,使用也很简单,一行代码就能搞定: 1: Toast.makeText(", Toast.LENGTH_LONG).show(); 但是我们经常会遇到这 ...

  4. php加载memcache

    安装php加载memcache[root@web-server ~]# rpm -qa | grep libevent [root@web-server ~]# yum -y install libe ...

  5. Smokeping 监控部署及配置

    安装参见: https://github.com/oetiker/SmokePing/blob/master/doc/smokeping_install.pod 1 Smokeping *** Gen ...

  6. ng1中 如何用双向绑定 实现单向绑定的初始时不显示双括号效果？

    ng1中 如何用双向绑定 实现单向绑定(ng-bind就可以不显示{{}})的初始时不显示双括号效果? AngularJS 实例 页面加载时防止应用闪烁: <div ng-app="& ...

  7. NC portal怎么重新开始入门，整个配置过程包括配置一个节点

    有一份文档,之后会上传,暂时不上传

  8. T-SQL基础 （存储过程，触发器|| 笔记0808）

    一:存储过程 1.使用EXEC 调用存储过程 2.系统存储过程是以SP_开头,SP_ProcedureName.:例子:EXEC sp_columns TableName 查看列信息   扩展存储过程 ...

  9. oracle 11g不能连接报ORA-12537+ora-609解决

    操作系统: windows2008 数据库:oracle11g 问题发生:一套正常跑了一年的应用系统,忽然无法连接上数据库,但是另外一个应用可以正常链接,数据入库正常. 数据库服务器端查看: 使用 l ...

  10. 堆排序的OC实现

    /* 建议先看堆调整方法,堆调整了解了,整个排序算法就算掌握了 */ - (void)viewDidLoad { [super viewDidLoad]; /* 测试数据 */ NSArray *ar ...