1，offsetLeft属性个offsetTop属性它俩的兼容性很差。IE9、IE9+、Chrome等高级浏览器：一个元素的offsetLeft值就是这个元素左边框外到自己offsetParent对象做边框内的距离。每一个元素天生都有一个属性，叫做offsetParent，表示自己的“便宜参数盒子”，这个offsetParent就是自己祖先元素中，离自己最近的已经定位的元素，如果自己祖先元素中没有任何盒子进行了定位，那么offsetParent对象就是body。
IE6、7的offsetParent的对象和高级浏览器有很大的不同。
一、自己如果没有定位属性，那么自己的offsetParent对象就是自己祖先元素中离自己最近的有width或者height的元素：
→ 我有宽度，offsetParent
→ 我没有宽高
→我没有定位
→ 我没有宽高
→ 我没有宽高，有定位，offsetParent
→我没有定位
二、自己如果有定位属性，那么自己的offsetParent就是自己祖先元素中离自己最近的有定位的元素。数值就是自己的左外边框到offsetParent对象的做内边框的值。
IE8的offsetParent对象是无论是否有定位，自己的offsetParent就是自己祖先元素中离自己最近的已经定位的元素。
兼容性解决办法，不是能力检测，也不是版本检测，而是善用这个属性，要确保属性的使用条件：自定义，父无边（父亲也要定位），这样的话，所有浏览器 值都是一样的，offsetLeft和offsetTop的值都是number类型。可以直接参与运算，不需要parseInt();。
2，offsetWidth属性和offsetHeight属性
全线兼容是自己的属性，和别的盒子无关。一个盒子的值就是自己的width+左右padding+左右border的宽度。如果盒子没有宽度，那么所有浏览器都将把px值当做offsetWidth，而不是100%；如果盒子没有高度，用文字支撑，所有浏览器都将把px值当做offsetHeight。
3，clientWidth属性和clientHeight属性
client表示“客户端”这里就是一个名字而已。clientWidth就是自己的width+padding的值。也就是说比offsetWidth少了一个border。
如果盒子没有宽度，那么所有浏览器都将把px值当做clientWidth。
如果盒子没有高度，用文字支撑，IE6clientHeight是0，其它浏览器都是数值。
