title: Inconsistent spacing between buttons across browsers?
body: <p><strong>Razor Syntax</strong>    </p>
  
  <pre><code>&lt;div class="input-group"&gt;
      &lt;span class="input-group-addon"&gt;Delivery Date &lt;span class="tip" title="@deliveryDateTooltip"&gt;?&lt;/span&gt;&lt;/span&gt;
      @Html.TextBox("DeliveryDate", Model.DeliveryDate.ToShortDateString(), "{0:MM/dd/yyyy}", new { @class = "datefield form-control", @data_key = "delivery-date", @data_original = Model.DeliveryDate.ToShortDateString(), @style = "width: 250px; max-width: 250px;" })
      @Html.TextBox("DayOfWeek", Model.DeliveryDate.DayOfWeek.ToString(), "{0}", new { @class = "dowfield form-control", @data_key = "delivery-date", @readonly = "readonly", @style = "width: 132px; max-width: 132px;" })
      &lt;button name="Clear" type="reset" class="btn btn-info" title="Clear the filter critera." data-monitor="ClearButton" style="border-radius: 0;"&gt;Clear&lt;/button&gt;
      &lt;button name="Filter" type="submit" class="btn btn-primary btn-default" title="Load the order according to the filter criteria." data-monitor="LoadButton" style="border-radius: 0;@(isIE ? "margin-left: -4px;" : "")"&gt;Load&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Chrome</strong></p>
  
  <p>Chrome looks perfectly fine and behaves exactly how I would expect.</p>
  
  <p><a href="https://i.stack.imgur.com/XlurD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XlurD.png" alt="Chrome preview"></a></p>
  
  <p><strong>Edge &amp; Internet Explorer 11</strong></p>
  
  <p>IE and Edge seem to have this invisible margin (not shown in the inspector).</p>
  
  <p><a href="https://i.stack.imgur.com/DZBzJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DZBzJ.png" alt="Edge preview"></a></p>
  
  <p>The problem is when I view the buttons in the inspector, they don't have a margin. However, setting a <code>margin-left: -4px;</code> on the filter/load button can fix this; hence, the <code>@(isIE ? "margin-left: -4px;" : "")</code> above.</p>
  
  <p><a href="https://i.stack.imgur.com/v4FjN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/v4FjN.png" alt="enter image description here"></a></p>
  
  <p><strong>Problems</strong></p>
  
  <ol>
  <li>I don't want to have to add a special CSS rule that only applies to IE and Edge.</li>
  <li>The right side of the load button doesn't exactly line up quite perfectly with the elements above it (it's inbetween -4px and -5px).</li>
  </ol>
  
  <p><strong>Question</strong></p>
  
  <p>Is there some CSS rule I can apply <em>always</em> that doesn't ruin the visuals in chrome but fixes then in IE and Edge?</p>
  
  <p>I've added a <a href="https://jsfiddle.net/Angryr/f0jqrhvk/4/" rel="nofollow noreferrer">JSFiddle here</a> that displays it. If you open it in chrome is looks correct, if you open it in IE or Edge it has a gap between the buttons. How do I fix this in a <em>non-exceptional</em> way?</p>