Why does changing the positioning of a table-row element from 'static' to 'absolute' back to 'static' result in a permanent height change?

http://stackoverflow.com/questions/24152542/why-does-changing-the-positioning-of-a-table-row-element-from-static-to-absol

by Aaron Kahlhamer

HTML

<div id="div1">
    <div id="div2">
        <p>Hello World!</p>
    </div>
</div>

<span id="span1">
</span>
<br>
<span id="span2">
</span>
<br>
<span id="span3">
</span>

CSS

#div1
{    
    background-color:red;
    display: table;
    height: 100px;
}

#div2
{    
    background-color:green;
    display: table-row;
    height: 75px;
}

JavaScript

$("document").ready(function() {
    
    function pos() {
        return $('#div2').css('position');
    }
   
    $('#span1').text(pos() + ' positioning height: ' + $('#div2').height());
     $('#div2').css({position: 'absolute'});
    $('#span2').text(pos() + ' positioning height: ' + $('#div2').height());
    $('#div2').css({position: 'static'});
    
    $('#span3').text(pos() + ' positioning height: ' + $('#div2').height());
    
    
    
});