html页面高度不同浏览器兼容性设置
页面需要嵌套在跨域的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 宽度 页面高度 |字号大中小 订阅
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页面高度不同浏览器兼容性设置相关推荐
- 设置页面高度为浏览器可视窗口大小
##设置页面高度为浏览器可视窗口大小## <!DOCTYPE html> <html><head><meta charset="UTF-8" ...
- IE浏览器兼容性设置
1 首篇 亲爱的猿,是不是还在被IE浏览器弄得焦头烂额?本博文将罗列几种方式,完美解决IE兼容性难题,希望能帮到给位同仁. 首先声明,本博文属于原创,如需转载,请标明链接,坚决谢绝剽窃.如有发现,本人 ...
- Edge浏览器兼容性设置，实用技巧，分享给你（2023新版）
Edge浏览器兼容性设置是一项非常重要且实用的功能技巧,可以帮助小伙伴更好地访问那些需要特定浏览器设置或版本的网站和应用程序.在本文中,小编将简要介绍如何使用Edge浏览器兼容性设置,以便各位小伙伴 ...
- WebOffice浏览器兼容性设置
weboffice官方下载地址: http://www.officectrl.com/download_01.htm //WebOffice问题解决 http://forum.dianju.cn/vi ...
- html5谷歌浏览器兼容性,谷歌浏览器怎样打开兼容模式_google浏览器兼容性设置在哪-win7之家...
google谷歌浏览器是现在目前最流行的浏览工具之一,但是在浏览的时候,大部分网页都要兼容模式才可以打开,那么就需要设置兼容模式,很多用户可能还不知道google浏览器兼容性设置在哪吧,为了帮助到大家 ...
- word如何设置长宽高_word页面高度和宽度怎么设置
大家好,我是时间财富网智能客服时间君,上述问题将由我为大家进行解答. word设置宽度高度的方法: 1.首先打开一篇文档,在功能区选择"页面布局". 2.在页面布局的页面设置功能区 ...
- 2345浏览器兼容性设置在哪里
在使用浏览器的时候,我们会通过开启兼容模式来提高兼容性,那么2345浏览器怎么兼容模式?下面就一起来看看具体的操作. 方法一: 1.打开浏览器后,点击上方的"闪电图标". 2.然后 ...
- 报名系统网页导出html,教资报名系统提示网站兼容性怎么办 ie浏览器兼容性操作流程...
教师资格证报名2021年入口已经于1月14日开通,3月13日举行笔试,相信不少考生在报名过程中,遇到兼容性站点添加的问题,报名的浏览器不是IE系列,兼容性站点如何添加呢?为帮助各位考生报考,小编来帮助 ...
- 网御星云WAF的配置页面与浏览器兼容性问题
有一旧的WAF设备要用起来,同事已经提前测试出了管理口IP和账号密码,机器上架后登录控制台,新建"真实服务器"填了IP后点击"提交"按钮没有任何反应.试了很多次 ...
最新文章
- 为什么像王者荣耀这样的游戏 Server 不愿意使用微服务？
- java8 环境变量设置
- 聊聊Elasticsearch的ExponentiallyWeightedMovingAverage
- Nodejs的http模块
- 三味Capsule：矩阵Capsule与EM路由
- 浅谈电磁学——基本电现象
- 提醒ASP.NET的初学者们注意加深以下方面的技术了解
- html图片从中间淡入淡出效果,CSS中的多个图像交叉淡入淡出-无需（java）脚本
- 如何在vue中使用阿里图标库
- 通过企业微信Api向企业微信用户发送消息的实现
- 供应链优势持续赋能 国美生态圈日趋完善
- Centos 7 安装 TEMPO2
- 谈谈我对服务网格的理解
- python白鹅类型_SCP-CN-161 翻译器
- cgb2106-day12
- 锤子终究走起了小米的路子
- linux如何卸载lightdm,在Linux Deepin上安装Pantheon Lightdm主题
- D2D与其他短距离通信技术
- 大数据和云计算是如何结合
- 淘宝sdk，淘宝api接口