How to explain the reasons for these two bug under IE

IE7- browsers have bug: on the handling of offsetTop attributes

[1] if the parent sets position: relative, then in the IE7- browser, the offsettop value is the paddingBottomvalue of the offsetParent element

<div id="out" style="padding: 5px;position: relative;">
    <div id="test" style="width:100px; height:100px; margin:10px;"></div>        
</div>
<script>
    //15(5+10)IE7-5
    console.log(test.offsetTop);
</script>

[2] if the parent sets position: aboslute (or other conditions that trigger haslayout), the offsettop value is the larger value of the paddingBottomvalue of the offsetParent element and the marginal top value of the current element

<div id="out" style="padding: 5px;position:absolute;">
    <div id="test" style="width:100px; height:100px; margin:10px;"></div>        
</div>
<script>
    //15(5+10)IE7-10(105)
    console.log(test.offsetTop);
</script>

Feb.28,2021

since it is bug, there is no reason. It should be the problem of the implementation of each browser when the standard was not unified at that time. Some are bug now, but not necessarily at that time, but they were not adopted by the standard later.

Menu