title: IE8 horizontal scrollbar problem
body: <p>I have an IE8 buggy horizontal scrollbar problem,
  similar to this:</p>
  
  <p><a href="https://stackoverflow.com/questions/139000/div-with-overflowauto-and-a-100-wide-table-problem">DIV with overflow:auto and a 100% wide table</a></p>
  
  <p>(unfortunately the solution suggested there (with zoom=1) does not work here,<br>
  or I don't know how to apply)</p>
  
  <p>the horizontal scrollbar should not appear
  (it does not appear in FF or Chrome<br>
  but it appears in IE8)</p>
  
  <p>the sample code, with CSS tables:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;body&gt;
  &lt;div style="display: table;"&gt;
      &lt;div style="display: table-cell;"&gt;
          &lt;div style="overflow-y: scroll; height: 19em;"&gt;
              &lt;div style="width: 30em; height: 30em; background-color: red;"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>the same problem, with absolute positioning:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;body&gt;
  &lt;div style="position: absolute;"&gt;
  &lt;div style="overflow-y: scroll; height: 19em;"&gt;
  &lt;div style="width: 30em; height: 30em; background-color: red;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>the "overflow-x: hidden" solution is not good, because it may hide some content;<br>
  padding-right may work, but that's too dirty hack (how many pixels? what happens in other browsers? what if the user magnifies the page?)</p>