html页面高度不固定在不同浏览器下的兼容性设置
网站建设 2023-01-28 20:49www.1681989.com免费网站
页面需要嵌套在跨域的iframe中，而页面高度不固定，需要每个页面把自己的高度获得后，通过js通知iframe调整显示。
而页面在获得自己的高度时，发现总是比预想的大。经过参考别人的博客，发现原来是w3c标准的原因。
也就是要在<html>前面加上<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://.w3./TR/xhtml1/DTD/xhtml1-transitional.dtd">
加上之后，document.documentElement.scrollHeight在IE和Chrome下，可以正常取到合适的全文高度，firefox下取到的则过高；用document.body.scrollHeight取则恰好相反。
采用了Math.m(document.documentElement.scrollHeight,document.body.scrollHeight)获得最小高度，正常。
加上W3C标准后，画面也出现了一些小的不同，比如页面的行间距，似乎IE的就要短一些，有些地方重合了。而且css也会严格区分大小写。
参考文章url
内容
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 += " 网页正文部分上"+ wdow.screenTop;
s += " 网页正文部分左"+ wdow.screenLeft;
s += " 屏幕分辨率的高"+ wdow.screen.height;
s += " 屏幕分辨率的宽"+ wdow.screen.width;
s += " 屏幕可用工作区高度"+ wdow.screen.availHeight;
s += " 屏幕可用工作区宽度"+ wdow.screen.availWidth;
s += " 你的屏幕设置是 "+ wdow.screen.colorDepth +" 位彩色";
s += " 你的屏幕设置 "+ wdow.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://.w3./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对象宽度加上Marg宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Marg高）
而如果没有定义W3C的标准，则
IE为
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox为
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Marg宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Marg高）
Opera为
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Marg宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Marg高）
真是一件麻烦事情，其实就开发来看，宁可少一些对象和方法，不使用最新的标准要方便许多啊。
而页面在获得自己的高度时，发现总是比预想的大。经过参考别人的博客，发现原来是w3c标准的原因。
也就是要在<html>前面加上<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://.w3./TR/xhtml1/DTD/xhtml1-transitional.dtd">
加上之后，document.documentElement.scrollHeight在IE和Chrome下，可以正常取到合适的全文高度，firefox下取到的则过高；用document.body.scrollHeight取则恰好相反。
采用了Math.m(document.documentElement.scrollHeight,document.body.scrollHeight)获得最小高度，正常。
加上W3C标准后，画面也出现了一些小的不同，比如页面的行间距，似乎IE的就要短一些，有些地方重合了。而且css也会严格区分大小写。
参考文章url
内容
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 += " 网页正文部分上"+ wdow.screenTop;
s += " 网页正文部分左"+ wdow.screenLeft;
s += " 屏幕分辨率的高"+ wdow.screen.height;
s += " 屏幕分辨率的宽"+ wdow.screen.width;
s += " 屏幕可用工作区高度"+ wdow.screen.availHeight;
s += " 屏幕可用工作区宽度"+ wdow.screen.availWidth;
s += " 你的屏幕设置是 "+ wdow.screen.colorDepth +" 位彩色";
s += " 你的屏幕设置 "+ wdow.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://.w3./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对象宽度加上Marg宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Marg高）
而如果没有定义W3C的标准，则
IE为
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox为
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Marg宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Marg高）
Opera为
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Marg宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Marg高）
真是一件麻烦事情，其实就开发来看，宁可少一些对象和方法，不使用最新的标准要方便许多啊。
网站设计
- 静宁会SEO的网站建设公司：全面提升您的网络影
- 提升在线业务的关键：选择最佳的丽水网站建设
- 浙江网站优化发展潜力如何
- 井研专业的网站建设公司：打造您的在线品牌
- 灵山SEO网站建设公司：提升您的在线业务表现
- 蒙城网站建设优化公司：提升您网站表现的理想
- 阳谷企业网站优化：提升线上业务力的关键
- 樟树专业的网站建设公司：打造您在线业务的坚
- 通河百度SEO排名的策略与技巧
- 重庆百度快照排名如何进行精准的客户引流
- 重庆百度快照排名
- 常宁便宜的建站公司：助您轻松打造在线业务
- 巫溪百度网站优化：提升网站曝光率与流量的关
- 湖北整站优化怎么做才能放大客户需求
- 闸北网站建设多少钱？全面解析与预算规划
- 辽宁企业网站优化怎么做电话营销