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看起来非常精致，表现得与我期望的完全一样。

Edge＆amp; Internet Explorer 11

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

问题是当我在检查员中查看按钮时，他们没有余量。但是，在过滤器/加载按钮上设置margin-left: -4px;可以解决此问题;因此，@(isIE ? "margin-left: -4px;" : "")以上。

问题

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

问题

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

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

Answer 1

差距的原因是由于＆＃34;显示＆＃34;这些要素的财产。当两个元素设置为＆＃34; inline＆＃34;或者＆＃34; inline-block＆＃34;，并且在HTML中它们之间至少有一个空格字符，它不会像你期望的那样被省略＆＃34; block＆＃34;元素。目的是您可以在文本正文中插入跨距或其他内联元素，并尊重周围的空白。

也就是说，你想使用＆＃34; inline-block＆＃34;并不常见。元素彼此相邻，并没有这个差距。有3个解决方案。

1）设置＆＃34;字母间距＆＃34;将父元素的值设置为负值，然后将其设置为子元素的正常值。在你的小提琴中：

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

2）消除标记中的空白，以便标记触摸。它可能看起来很难看，但这样可以解决问题。

3）使用不同的方式设置元素的样式。例如，使用＆＃34; display：block＆＃34;和＆＃34; float：left＆＃34;，或者使用flexbox作为另一个提到的答案。

Answer 2

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

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

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

这似乎消除了按钮之间的差距而不会以负面方式影响镀铬（在镀铬上看起来仍然相同）。

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

JSFiddle答案。

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

2 个答案: