如何将引导输入组中的字段水平对齐，与IE中颜色选择器的插件对齐

Question

我使用引导程序显示颜色选择器和与颜色选择相关的复选框。要求是在一行中显示元素：正方形，里面首先选择颜色;然后复选框，然后标签，所有相同高度的元素都在一条水平线上。

<div class="form-group input-group">
    @Html.LabelFor(m => m.Color)
    <div class="input-group" id="color-picker-container" align="left">
        <span class="input-group-addon"><i></i></span>
            @Html.TextBoxFor(m => m.Color, new { @class = "form-control", id = "color-picker" })
            @Html.CheckBoxFor(m => m.IsNew, new { id = "is-new" })
            @Html.LabelFor(m => m.IsNew)
   </div>
</div>

我在Firefox/Chrome中得到了所需的布局，但在IE中图片失真了：所选颜色以双倍高的矩形显示;矩形的右侧在一行中有一个文本框，在其下方有一个复选框，第二行中带有标签（两行组合的高度与具有选定颜色的矩形相同）。

为了使所有元素在IE中都位于一行中，与其他浏览器类似，应该更改什么？

更新：我们有一个逻辑来使用最新的IE版本，因此，使用IE 11。

Answer 1

也许，这对其他人很有用。 样式 = 颜色选择器的"显示：内联"可以解决问题，因为它覆盖了用于输入组类的显示：表样式。

<div class="form-group input-group">
@Html.LabelFor(m => m.Color)
<div class="input-group" id="color-picker-container" align="left">
    <span class="input-group-addon"><i></i></span>
        @Html.TextBoxFor(m => m.Color, new { @class = "form-control", id = "color-picker", style = "display:inline" })
        @Html.CheckBoxFor(m => m.IsNew, new { id = "is-new" })
        @Html.LabelFor(m => m.IsNew)

，