title: Setting div max height doesn't work
body: <p>I have this simple HTML</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;style&gt;
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div style="position: relative; overflow: visible; width: 100%; height: 100%;" class="surface"&gt;
      &lt;div style="width: 300px; max-height: 2px; height: 2px; position: absolute; left: 36.165px; top: 0.8957px; border: 1px solid red;"&gt;&lt;/div&gt;
      &lt;div style="width: 1px; height: 200px; position: absolute; left: 30.165px; top: 47.8957px; border: 1px solid red;"&gt;&lt;/div&gt;   
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>There are basically two <code>div</code>s: one "horizontal" (height 2px) and one "vertical" (height 2px).</p>
  
  <p>When I view the page on firefox:</p>
  
  <p><img src="https://i.stack.imgur.com/M1uGs.jpg" alt="enter image description here"></p>
  
  <p>while on IE (8) something weired happens:</p>
  
  <p><img src="https://i.stack.imgur.com/SAuzj.jpg" alt="enter image description here"></p>
  
  <p>the top DIV is not 2px high.</p>
  
  <p>Any idea why is that so ?</p>