html页面高度不固定在不同浏览器下的兼容性设置

前端技术 2023/09/07 CSS
页面需要嵌套在跨域的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://www.phpstudy.net/article/19844.htm
http://www.phpstudy.net/article/32874.htm

内容：
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高）

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

本文地址：https://www.stayed.cn/item/19469

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案