title: Native IE8 - Why do these 'inline-block' elements not 'wrap words' if their parent is the first floated item?
body: <p>Sorry in advance, this is long and weird.
  I found this bug in native IE8 when working with Bootstrap and have stripped it all the way back to find the cause.  But I want to know <strong>why</strong> it happens.</p>
  
  <p><strong>The setup:</strong> I have a <code>.container</code>, inside the container I have a <code>.box</code> (another container essentially) and inside that box I have a <code>&lt;div&gt;</code> element that is <code>display: inline-block</code>.</p>
  
  <p><strong>The conditions:</strong> <code>.box</code> <em>must</em> be floated.</p>
  
  <p><strong>The issue:</strong>  The inline block element that is inside the <strong>first</strong> <code>.box</code> element will have it's text <strong>not</strong> wrapping (it will overflow the containers).  The inline block element that is inside any other <code>.box</code> element will have it's text wrapping as expected.</p>
  
  <p><strong>Fixes:</strong> This can be fixed either removing the float of the <code>.box</code> or by applying a border to the <code>.inline-block</code> element (can be transparent), suggesting that it's a hasLayout bug (although <code>zoom: 1</code> doesn't fix it).  But I thought <code>display: inline-block</code> didn't have the hasLayout bug?</p>
  
  <p>So why does this issue happen and why is it only that first child?!?</p>
  
  <p>I've put the demo code on my server as JSBin doesn't work on IE8, sorry for the link off.</p>
  
  <p><strong><a href="http://davidpauljunior.com/ie8-inline-block.html" rel="nofollow noreferrer">HERE'S THE DEMO</a></strong></p>
  
  <p><strong>Demo HTML</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;h2&gt;A container (red) with 1 box child (blue) which has 1 inline-block child (green background - border will fix issue)&lt;/h2&gt;
      &lt;div class="box"&gt;
          &lt;div class="inline-block"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
      &lt;h2&gt;A container (red) with 2 box children (blue) which each have 1 inline-block child (green background - border will fix issue)&lt;/h2&gt;
      &lt;div class="box"&gt;
          &lt;div class="inline-block"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="box"&gt;
          &lt;div class="inline-block"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Demo CSS</strong></p>
  
  <pre><code>*, *:before, *:after {
      -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
  }
  body {
      margin: 0;
  }
  .container {
      width: 800px;
      margin: 10px auto;
      padding: 10px;
      border: 1px solid red;
  }
  
  /* Clear the float */
  .container:before,
  .container:after {
      content: " ";
      display: table;
  }
  .container:after {
      clear: both;
  }
  
  .box {
      float: left; /* THIS IS THE TRIGGER (without float it works) */
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      border: 1px solid blue;
  }
  
  .inline-block {
      display: inline-block;
      background: #c4df9b;
      /*border: 1px solid green;*/  /* Having a border fixes it (when there's a float) */
  }
  
  .inline-block + .inline-block {
      background: #9db678;
  }
  </code></pre>
  
  <p><strong>BIG PICTURE!</strong></p>
  
  <p><img src="https://i.stack.imgur.com/oLKXa.png" alt="IE8 words overlapping container on first child parent"></p>