时间戳

首页 > 解决方案 > 从 Chrome 迁移到 IE11 的主要样式问题

html - 从 Chrome 迁移到 IE11 的主要样式问题

问题描述

我正在处理的屏幕在 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>

标签： htmlcssgoogle-chromeinternet-explorer

解决方案

所以解决这个问题的主要方法是使用前缀，它解决了许多问题。但是，我最终也删除了很多 Flexbox 并使用纯 HTML 和 CSS。这让我可以根据需要设置页面样式，并在我工作的时间限制内交付它。

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

推荐阅读