如何將Bootstrap輸入組中的水平字段與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

可能會對其他人有用。 顏色選擇器的style =“ display：inline”達到目的，因為它覆蓋了display：table樣式，該樣式用於輸入組類。

<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)

，