标准模式和混杂模式下浏览器的可视区域的宽高问题

利用document.compatMode可以用来判断浏览器的模式是标准模式还是混杂模式，

（1）       CSS1Compat表示的是标准模式

（2）       BackCompat表示的是混杂模式

不同的模式获取宽高的方式是不一样的，为了兼容一般要么对浏览器的工作模式加以判断严要么则是利用利用||运算兼容

标准模式：

document.documentElement.clientHeight

document.documentElement.clientWidth//浏览器可是区域的宽高

document.documentElement.scrollTop

document.documentElement.scrollLeft//浏览器滚轴滚动的距离

 

混杂模式：不写DOCTYPE的声明

  document.body.clientHeight

  document.body. clientWidth//浏览器可是区域的宽高

document. body.scrollTop

document. body.scrollLeft//浏览器滚轴滚动的距离

 

同时除了IE 8 及 更早 IE 版本不支持该属性,所有其他的主流浏览器均将信息放入到window上，支持一下方式属性

window.innerHeight

window.innerWidth//浏览器可是区域的宽高

window.pageXOffset

window.pageYOffset//浏览器滚轴滚动的距离

在主流浏览器中可以直接使用Window的范式获取相关的宽高

 

offsetWidth：元素自身的宽度包括width+border+padding不包含margin的值

offsetHeight:同理

offsetLeft：元素左侧相对于其父元素的左内边距的距离

offsetTop：同理两者均包含元素自身的margin