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

Posted 2023-03-06

【中文标题】从 Chrome 迁移到 IE11 的主要样式问题

【英文标题】：Major styling problems moving from Chrome to IE11

【发布时间】：2020-04-21 12:39:09

【问题描述】：

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

【问题讨论】：

看起来您非常依赖Flexbox。 IE has some bugs 在渲染 Flebox 项目时。运行 CSS through a prefixer 可能值得一试。

@APAD1 这是一个很好的提示。我需要更多地了解这一点；感谢您的提示。

问题出在 flex 上，因为其他社区成员已经提出了建议。如果您在 CSS 中使用最小宽度或最大宽度或长度，那么它也会导致此问题。您可以将其替换为长度或宽度可能有助于解决此问题。如果问题仍然存在，那么我建议您为您的代码提供简单的 HTML 和 CSS。我们将努力提供进一步的建议。

这个问题有进展吗？如果您找到了解决方案，那么请尝试将其作为答案发布，并尝试在 48 小时后将您自己的答案标记为该问题的可接受答案，此时可以标记。如果问题仍然存在，请尝试参考线程上的建议，并让我们知道您对此问题的状态。我们将努力提供进一步的建议。感谢您的理解。

【参考方案1】：

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

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