1.问题的
引发
:重构InterActiveEditor,在
WebStorm中浏览可以进行Resize,打包到Eclipse中不能进行Resize
在WebStorm中document.documentElement.clientHeigh能够获取高度,
嵌套到portal中, document.documentElement.clientHeigh 不能够获取到高度,是一个固定值
2. 引发问题 原因
查看相关文档跟DTD有关
页面具有 DTD,或者说指定了 DOCTYPE 时,使用 document.documentElement。
页面不具有 DTD,或者说没有指定了 DOCTYPE,时,使用 document.body。
3.什么是DTD
DTD (Document Type Definition):文档类型定义:是一套为了进行程序间的数据交换而建立的关于标记符的语法规则:
说白了也就是XML标记符的语法规则,是用来验证XML文件格式的验证机制,是XML的一个组成部分。
全写<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
可以写成 <!DOCTYPE html>
4.为什么使用 <!doctype html>
在写html的时候需要定义文档类型;如果没有定义,浏览器在渲染页面的时候会使用怪异模式;各个浏览器在怪异模式下对各个元素渲染是有差异的。
<!doctype html>是HTML5标准网页声明,如果网页开头没有定义DTD它,浏览器就会开启怪异模式(标准模式关闭)去解析网页。如果定义了它浏览器就会在严格模式(标准模式)下解析网页。
IE 6 for Windows/mac, Mozilla, Safari和Opera 都实现了这两种模式,但是IE 6以下版本永远定在了怪异模式。
每个浏览器都有自己的方式来激活怪异模式。可查看这个清单: http://hsivonen.iki.fi/doctype/
5.获取浏览器当前网页的渲染方式
document.compatMode属性
BackCompat:标准模式关闭。
CSS1Compat:标准模式开启。
For example:
当document.compatMode等于BackCompat时,浏览器客户区宽度是document.body.clientWidth;
当document.compatMode等于CSS1Compat时,浏览器客户区宽度是document.documentElement.clientWidth。
if (document.compatMode === "BackCompat") {
cWidth = document.body.clientWidth;
cHeight = document.body.clientHeight;
sWidth = document.body.scrollWidth;
sHeight = document.body.scrollHeight;
sLeft = document.body.scrollLeft;
sTop = document.body.scrollTop;
} else { //document.compatMode === "CSS1Compat"
cWidth = document.documentElement.clientWidth;
cHeight = document.documentElement.clientHeight;
sWidth = document.documentElement.scrollWidth;
sHeight = document.documentElement.scrollHeight;
sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;
sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
}
在WebStorm中document.documentElement.clientHeigh能够获取高度,
嵌套到portal中, document.documentElement.clientHeigh 不能够获取到高度,是一个固定值
2. 引发问题 原因
查看相关文档跟DTD有关
页面具有 DTD,或者说指定了 DOCTYPE 时,使用 document.documentElement。
页面不具有 DTD,或者说没有指定了 DOCTYPE,时,使用 document.body。
3.什么是DTD
DTD (Document Type Definition):文档类型定义:是一套为了进行程序间的数据交换而建立的关于标记符的语法规则:
说白了也就是XML标记符的语法规则,是用来验证XML文件格式的验证机制,是XML的一个组成部分。
全写<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
可以写成 <!DOCTYPE html>
4.为什么使用 <!doctype html>
在写html的时候需要定义文档类型;如果没有定义,浏览器在渲染页面的时候会使用怪异模式;各个浏览器在怪异模式下对各个元素渲染是有差异的。
<!doctype html>是HTML5标准网页声明,如果网页开头没有定义DTD它,浏览器就会开启怪异模式(标准模式关闭)去解析网页。如果定义了它浏览器就会在严格模式(标准模式)下解析网页。
IE 6 for Windows/mac, Mozilla, Safari和Opera 都实现了这两种模式,但是IE 6以下版本永远定在了怪异模式。
每个浏览器都有自己的方式来激活怪异模式。可查看这个清单: http://hsivonen.iki.fi/doctype/
5.获取浏览器当前网页的渲染方式
document.compatMode属性
BackCompat:标准模式关闭。
CSS1Compat:标准模式开启。
For example:
当document.compatMode等于BackCompat时,浏览器客户区宽度是document.body.clientWidth;
当document.compatMode等于CSS1Compat时,浏览器客户区宽度是document.documentElement.clientWidth。
if (document.compatMode === "BackCompat") {
cWidth = document.body.clientWidth;
cHeight = document.body.clientHeight;
sWidth = document.body.scrollWidth;
sHeight = document.body.scrollHeight;
sLeft = document.body.scrollLeft;
sTop = document.body.scrollTop;
} else { //document.compatMode === "CSS1Compat"
cWidth = document.documentElement.clientWidth;
cHeight = document.documentElement.clientHeight;
sWidth = document.documentElement.scrollWidth;
sHeight = document.documentElement.scrollHeight;
sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;
sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
}