跨浏览器按钮之间的间距不一致？

Question

Razor 语法

<div class="input-group">
    <span class="input-group-addon">Delivery Date <span class="tip" title="@deliveryDateTooltip">?</span></span>
    @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;" })
    <button name="Clear" type="reset" class="btn btn-info" title="Clear the filter critera." data-monitor="ClearButton" style="border-radius: 0;">Clear</button>
    <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;" : "")">Load</button>
</div>

Chrome

Chrome 看起来非常好并且表现完全符合我的预期。

Edge 和 Internet Explorer 11

IE 和 Edge 似乎有这个不可见的边距（未在检查器中显示）。

问题是当我在检查器中查看按钮时，它们没有边距。但是，在 filter/load 按钮上设置 margin-left: -4px; 可以解决这个问题；因此，上面的@(isIE ? "margin-left: -4px;" : "")。

问题

我不想添加仅适用于 IE 和 Edge 的特殊 CSS 规则。
加载按钮的右侧与其上方的元素并没有完全对齐（它在 -4px 和 -5px 之间）。

问题

是否有一些 CSS 规则我可以应用 always 不会破坏 chrome 中的视觉效果，但会在 IE 和 Edge 中修复？

我添加了一个 JSFiddle here 来显示它。如果你在 chrome 中打开它看起来是正确的，如果你在 IE 或 Edge 中打开它它的按钮之间有一个间隙。我该如何以 非例外 方式解决此问题？

Answer 1

我不知道这是最好的解决方案，但我相信我已经找到了。

.input-group {
  font-size: 0px;
}

.input-group > span,
.input-group > input,
.input-group > button {
  font-size: 14px;
}

这似乎消除了按钮之间的间隙而不影响 chrome（在 chrome 上看起来仍然相同）。

指出它可能与 bootstrap 相关的贴纸让我在 google 上找到了 this page，这让我得到了这个结果。

JSFiddle 的答案。

Answer 2

差距的原因是由于那些元素的"display" 属性。当两个元素设置为 "inline" 或 "inline-block"，并且在 HTML 中它们之间至少有一个空白字符时，它不会像 "block" 那样被省略] 元素。目的是您可以在文本正文中插入 span 或其他内联元素，并尊重周围的空白。

就是说，您希望并排使用 "inline-block" 个元素并且不存在这种间隙的情况并不少见。有3种解法。

1) 将父元素的"letter spacing"设置为负值，然后对子元素设置回正常。在你的 fiddle 中是：

div {
  letter-spacing:-100px;
}
div * {
  letter-spacing:normal;
}

2) 消除标记中的空格，使标签相互接触。它可能看起来很丑，但这样可以解决问题。

3) 使用不同的方式来设置元素的样式。例如，使用 "display: block" 和 "float: left"，或使用 flexbox 作为提到的另一个答案。

跨浏览器按钮之间的间距不一致？

Inconsistent spacing between buttons across browsers?

css

cross-browser

razor

twitter-bootstrap