首页 > 其他分享 >html页面高度不同浏览器兼容性设置

html页面高度不同浏览器兼容性设置

时间:2022-12-05 14:34:18浏览次数:62  
标签:body 兼容性 浏览器 documentElement clientHeight clientWidth html document 页面


页面需要嵌套在跨域的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获取页面高度 


<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高)

真是一件麻烦事情,其实就开发来看,宁可少一些对象和方法,不使用最新的标准要方便许多啊。

标签:body,兼容性,浏览器,documentElement,clientHeight,clientWidth,html,document,页面
From: https://blog.51cto.com/u_11295556/5912073

相关文章

  • 前端知识-01-HTML内容
    HTML介绍Web服务本质 importsocketsk=socket.socket()sk.bind(("127.0.0.1",8080))sk.listen(5)whileTrue:conn,addr=sk.accept()data=c......
  • HTML5中新的summary和details标签学习
    HTML5中的标签是越来越多了,下面挖掘两个居然在标准中提到的,但依然绝大部分浏览器都不支持的标签,目前只有chrome支持(最新版本)。所谓的summary和detai......
  • HTML5新的数字输入控件
    在HTML5中,新增加了数字输入控件,其中是一个文本框外加一个数字微调上下按钮,即一个spinnercontrol,如下:<!DOCTYPEhtml><html><head><metachar......
  • chrome 浏览器手动同步更新书签数据备份
    现在很多人会使用浏览器自带的同步工具,这样即使换了电脑,对于这个浏览器来说,与没换电脑一样,这就是同步的作用。chrome浏览器,只要有网络,只要登录了账号是自动同步的,所......
  • 在doccker里面安装有头浏览器--实现跑自动化可以查看ui交互--(有空了解下)
    https://mp.weixin.qq.com/s/oUFF1_0ygwEyY8X-cg6g0Q看到这个,大家应该也毕竟熟悉了,其实就是Docker的NoVnc的镜像,图形界面化docker环境,用浏览器直接打开就可以看到桌面,还可......
  • 浏览器工作的宏观流程
    浏览器架构发展单进程早期的浏览器是单进程的,任务的处理都在一个进程上,进程上有可能有网络线程,页面线程等用以进行网络操作和页面渲染,但中间若是有任务出错就容易导致......
  • IDEA本地项目启动成功,浏览器无法访问对应路径
    某次同时启动多个模块的时候,编译通过,但浏览器访问本地的模块路径时,发现第四个启动的模块端口访问不到,  解决方案是修改项目内存大小,或者少开几个模块   由原来......
  • stat() "/root/xxx/index.html" failed (13: Permission denied)
    前言在nginx上部署静态网页报502,于是查看nginx错误日志error_log/var/log/nginx/error.log;,却没有看到任何错误信息;访问nginx活动日志access_log/var/log/nginx/......
  • Markdown转Html应用与实践
    问题背景工作项目中经常需要对外提供API接口,并提供对应的接口文档,供调用方阅读使用。原先使用Word来书写API文档,线下发送文档给API使用者,这种方式较为不便,每当接口发生改动......
  • vs code markdown转html
    1.安装扩展插件"CopyMarkdownasHTML"2.打开.md文件3.用Ctrl+Shift+P打开命令面板,输入"markdown",在下拉选项中选择"Markdown:CopyasHTML",则转换后的.html文本已经存于......