从 Chrome 到 IE11 的主要样式问题

Question

我正在处理的屏幕在 Chrome 中看起来不错，但是当我在 IE11 中打开它时却一团糟。我一直在搜索旧问题，但似乎无法查明问题所在。

Chrome:

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。这使我能够根据需要设置页面样式，并在我工作的时间限制内交付它。

经验教训：提前计划跨浏览器兼容性。

从 Chrome 到 IE11 的主要样式问题

Major styling problems moving from Chrome to IE11

html

css

internet-explorer

google-chrome