title: Why does changing the positioning of a table-row element from 'static' to 'absolute' back to 'static' result in a permanent height change?
body: <p>A <code>display: table-row</code> div with <code>height: 75px</code> is nested inside a <code>display: table</code> div with <code>height: 100px</code></p>
  
  <p>The height of the child is <code>100px</code> initially with <code>position: static</code> </p>
  
  <p>By changing the positioning of the child element to <code>absolute</code> and then back to <code>static</code>, the height of the child permanently changes from <code>100px</code> to <code>75px</code>. </p>
  
  <p>It only occurs if the parent element is a table and the child is a table-row <em>and</em> apparently it's only in WebKit; firefox/IE change back to 100px height but Chrome/Safari don't. </p>
  
  <pre><code>&lt;div id="div1"&gt;
      &lt;div id="div2"&gt;
          Hello, world!
      &lt;/div&gt;
  &lt;/div&gt;
  
  #div1
  {
      display: table;
      height: 100px;
  }
  
  #div2
  {
      display: table-row;
      height: 75px;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/mattam/t5mB3/1" rel="noreferrer">Here's the jsfiddle</a> with the example and output of the positioning type/height.</p>
  
  <p>I originally noticed it by messing with CSS properties in the Chrome developer tools, so it's not something specific to jsfiddle or jQuery.</p>
  
  <p>Why does the height permanently change?</p>