從 Chrome 遷移到 IE11 的主要樣式問題

Question

我正在處理的屏幕在 Chrome 中看起來不錯，但是當我在 IE11 中打開它時，它是一團糟。 我一直在搜索舊問題，但似乎無法確定問題所在。

鉻合金：

IE：

<div class="row">
    <div class="col-md-12">
        <div class="form-group" style="display: flex; justify-content: space-between">
        <div>
            @Html.Label("NT User Id:", new { style = "font-size: medium" })
            @Html.Label("* ", new { @class = "text-danger", style = "font-weight: bold; font-size: medium" })
        </div>
        <div>
            @Html.TextBoxFor(m => m.User_Id, new { @class = "form-control", @maxlength = 20, style = "border: none; font-size: 14px; width: 260px", placeholder = "NT User ID" })
            @Html.ValidationMessageFor(m => m.User_Id, String.Empty, new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group" style="display: flex; justify-content: space-between">
    <div>
        @Html.Label("Last Name:", new { style = "font-size: medium" })
        @Html.Label("* ", new { @class = "text-danger", style = "font-weight: bold; font-size: medium" })
    </div>
    <div>
        @Html.TextBoxFor(m => m.LastName, new { @class = "form-control", @maxlength = 50, style = "border: none; font-size: 14px; width: 260px", placeholder = "User Last Name" })
        @Html.ValidationMessageFor(m => m.LastName, String.Empty, new { @class = "text-danger" })
    </div>
</div>
<div id="ddlNewUserHealthPlan" class="form-group" style="display: flex; justify-content: space-between">
    <div>
        @Html.Label("Health Plan:", new { style = "font-size: medium" })
        @Html.Label("* ", new { @class = "text-danger", style = "font-weight: bold; font-size: medium" })
    </div>
    <div>
        @Html.DropDownListFor(m => m.NewUserHealthPlans, (IEnumerable<SelectListItem>)Model.GetHealthPlans(Model.HEALTHPLANLIST), "Select a Healthplan ---", new { @class = "form-control", @id = "ddlNewUserHealthPlanSelect", style = "font-size: 14px; border: none; width: 260px; padding-bottom: 0" })
        @Html.ValidationMessageFor(m => m.NewUserHealthPlans, String.Empty, new { @class = "text-danger" })
    </div>
</div>

Answer 1

因此，對此的主要修復最終是使用prefixer ，它解決了許多問題。 然而，我也最終刪除了很多 Flexbox 並使用純 HTML 和 CSS。 這允許我根據需要設置頁面樣式並在我工作的時間限制內交付它。

經驗教訓：提前計划這種跨瀏覽器兼容性。