上网找了好久没有找到一个offsetLeft在各浏览器的值，自己用了一晚上的时间在各浏览器测试出来的offsetLeft的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>offsetLeft和offsetTop</title>
<style>
*{
margin: 0px;
padding: 0px;
}
body{
500px;
height: 200px;
padding: 25px;
margin: 32px;
border: 51px solid yellow;
background: pink;
/* position: absolute; */
/* 108*/
}
#pppd1{
1000px;
padding: 1px;
margin: 3px;
border: 4px solid yellow;
position: absolute;
/* 8 */
}
#ppd1{
1000px;
padding: 11px;
margin: 3px;
border: 4px solid yellow;
/* 18 */
}
#pd1{
10px;
height: 100px;
padding: 1px;
margin: 3px;
border: 6px solid yellow;
background: pink;
/* 10 */
}
#d1{
100px;
height: 200px;
padding: 20px;
margin: 30px;
border: 40px solid skyblue;
background: pink;
}
</style>
</head>
<body>
<div id="pppd1">
<div id="ppd1">
<div id="pd1">
<div id="d1"></div>
</div>
</div>
</div>
</body>
</html>
<script>
var d1 = document.getElementById('d1');
console.log(d1.offsetLeft);
</script>
<!--
ie 6/7 () 无论父级怎么改变offset永远不变
offsetLeft = (父padding-left)+(当margin-left)
---------------------------------------------------------------------------------
父级没有定位且父级是body时
firefox
offsetLeft = (父padding-left)+(父margin-left)+(当margin-left)
ie8/9/10/11 chrome
offsetLeft = (父padding-left)+(父margin-left)+(父border-left)+(当margin-left)
---------------------------------------------------------------------------------
父级没有定位且父级有多层时
ie8/9/10/11 chrome （所有父，包括body）
offsetLeft = (所有父padding-left)+(所有父margin-left)+(所有父border-left)+(当margin-left)
firefox （所有父，不包括body）
offsetLeft = (所有父padding-left)+(所有父margin-left)+(所有父border-left)+(当margin-left)+ (body的padding-left)+(body的margin-left)
--------------------------------------------------------------------------------------
父级有定位且定位不是在body
ie8/9/10/11 chrome 和firefox
向上取父级,把所有父级元素的padding-left、margin-left、border-left相加，直到的遇到定位时,把定位元素的padding-left相加,最后加上自身元素的margin-left
offsetLeft = (无定位父padding-left)+(无定位父margin-left)+(无定位父border-left)+(有定位父padding-left)+(当padding-left)
----------------------------------------------------------------------------------------
父级有定位且定位是了在body
chrome
向上取父级,把所有父级元素的padding-left、margin-left、border-left相加，直到的遇到body定位时,把body定位元素的padding-left和border-left相加,最后加上自身元素的margin-left
offsetLeft = (无定位父padding-left)+(无定位父margin-left)+(无定位父border-left)+(有定位父padding-left)+(有定位父border-left)+(当padding-left)
ie8/9/10/11 和firefox 这个和定位不是在body时是一样的
向上取父级,把所有父级元素的padding-left、margin-left、border-left相加，直到的遇到body定位时,把body定位元素的padding-left和border-left相加,最后加上自身元素的margin-lef
offsetLeft = (无定位父padding-left)+(无定位父margin-left)+(无定位父border-left)+(有定位父padding-left)+(当padding-left)
----------------------------------------------------------------------------------------
1级父级有定位且定位不是body
在chrome和firefox下,ie还没有测试
offsetLeft =(当margin-left);
所以可以用这个属性去写滑动的效果
-->