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;
}
1786
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
