title: How to emulate min-width in IE8
body: <p>The IE8 documentation says it supports min-width, but it doesn't seem to work for me.</p>
  
  <p>The html I want to be a minimum width is in table cells.</p>
  
  <p>I saw another question here which suggested adding a 1-pixel height div to each cell, with a width setting, but that doesn't work - IE renders it as 18 pixels high, for some reason.</p>
  
  <p>Here is the html code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script src="jquery.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;style type="text/css"&gt;
  table.keyboard div.key {
      height: 50px;
      font-size:50px;
      border: 5px outset gray;
      min-width: 60px;
      text-align: center;
  }
  table.keyboard div.spc {
      height: 1px;
      width: 60px;
      background-color: green;
  }
  
  table.keyboard td:hover {
      background-color: lightblue;
  }
  table.keyboard {
      border: 3px inset blue;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="body"&gt;
  &lt;div&gt;Here is some stuff&lt;/div&gt;
  &lt;table class='keyboard'&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;div class='key'&gt;1&lt;/div&gt;&lt;div class='spc'&gt;&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div class='key'&gt;2&lt;/div&gt;&lt;div class='spc'&gt;&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div class='key'&gt;3&lt;/div&gt;&lt;div class='spc'&gt;&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div class='key'&gt;4&lt;/div&gt;&lt;div class='spc'&gt;&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div class='key'&gt;5&lt;/div&gt;&lt;div class='spc'&gt;&lt;/div&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The "spc" div appears 18 px high!</p>
  
  <p>Of course, if min-width worked, I wouldn't need the div...</p>
  
  <pre><code>&lt;table class='keyboard'&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;div class='key'&gt;1&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div class='key'&gt;2&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div class='key'&gt;3&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div class='key'&gt;4&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div class='key'&gt;5&lt;/div&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Any clues?</p>
  
  <p>Just to make this easier, I have put 3 different versions of <a href="http://www.trumphurst.com/min-width1.htm" rel="noreferrer">this code on my website</a>.</p>