title: Bootstrap grid system on Microsoft Edge
body: <p>I have an issue with column size on Microsoft Edge and IE11. Everything works fine on other browsers, but on Edge and IE, it seems like the column width are larger than they are supposed to be. For example, an inline form group looks normal on Chrome:</p>
  
  <p><img src="https://i.imgur.com/i0KePdX.png" alt="chrome inline form-group"></p>
  
  <p>And this is the result on Edge:</p>
  
  <p><img src="https://i.imgur.com/DDuG1pO.png" alt="Edge inline form-group"></p>
  
  <p>Code:</p>
  
  <pre><code>&lt;div class="well"&gt;
      &lt;h5&gt;Address&lt;/h5&gt;
      &lt;div class="form-horizontal"&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="company-address" class="col-xs-4 control-label label-left"&gt;Company name&lt;/label&gt;
              &lt;div class="col-xs-8"&gt;
                  &lt;input type="text" id="company" class="form-control"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Everywhere where I use <code>col-*-*</code> classes, the width seem to be larger than the bootstrap proportion. Thus many of them ends up stacking vertically as they don't fit on the same <code>row</code></p>
  
  <p>Also another bizarre difference is the <code>form-control</code>'s height seemingly bigger on Edge.</p>
  
  <p>What may cause such behavior and how do I fix it?</p>