title: IE 11 box-sizing issue (not working when adding border or padding)
body: <p>I have an <code>&lt;ul&gt;</code> where each <code>&lt;li&gt;</code> should <strong>split the available width</strong> in five:</p>
  
  <pre><code>&lt;ul class="other-languages-products-list"&gt;
      &lt;li&gt;1&lt;/li&gt;
      &lt;li&gt;2&lt;/li&gt;
      &lt;li&gt;3&lt;/li&gt;
      &lt;li&gt;4&lt;/li&gt;
      &lt;li&gt;5&lt;/li&gt;
      &lt;li&gt;6&lt;/li&gt;
      &lt;li&gt;7&lt;/li&gt;
      &lt;li&gt;8&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The following CSS works fine in Chrome and Firefox (latest) but fails in Internet Explorer 11, where last <code>&lt;li&gt;</code> goes on a new line and only four are displayed in a row:</p>
  
  <pre><code>.other-languages-products-list {
      list-style: none;
      margin: 0;
      padding: 0;
  }
  
  .other-languages-products-list li {
      float:left;
      width: 20%;
      box-sizing: border-box;
      border: 1px solid black;
  }
  
  .other-languages-products-list:before,
  .other-languages-products-list:after {
      display: table;
      content: " ";
  }
  
  .other-languages-products-list:after {
      clear: both;
  }
  </code></pre>
  
  <p>Is this a know bug or I'm missing something? </p>