css - Firefox 在加载 mvc razor 页面时错误地显示元素，select2 js

Question

Firefox 59.0 元素 MVC.NET。使用 https://select2.github.io用于选择元素的 js 库 在 View 上有许多元素，例如:

                    <div class="control control_medium control_select">
                    <select name="@nameof(Model.Query.BudgetCycleIds)"
                            @Html.AjaxViewSubmitOnChange()
                            @Html.AsugfAutoComplete()
                            multiple="multiple">
                        <option value="0">Все</option>
                        @foreach (var budgetCycle in Model.BudgetCycles)
                        {
                            <option value="@budgetCycle.Id" @(Model.Query.BudgetCycleIds?.Contains(budgetCycle.Id) ?? false ? "selected" : "")>@budgetCycle.Name</option>
                        }
                    </select>
                </div>

在 html 中相同:

<select name="BudgetCycleIds" ajaxview-submit-onchange="" asugf-select2="" multiple="" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true">
                        <option value="0">Все</option>
                            <option value="13" selected="">2010 - 2012</option>
                            <option value="14">2011 - 2013</option>
                            <option value="9">2012 - 2014</option>
                            <option value="5">2013 - 2015</option>
                            <option value="6">2014 - 2016</option>
                            <option value="7">2015 - 2017</option>
                            <option value="1">2016 - 2018</option>
                            <option value="2">2017 - 2019</option>
                            <option value="4">2018 - 2020</option>
                    </select>

普通用户界面(加载前):

非正常 UI(加载后一秒内):

普通用户界面(加载后两秒内):

其他浏览器也一样，但是速度很快，用户看不到界面跳转。 如何保证不出现错误的界面

Answer 1

不是一个好的解决方案(因为布局是“跳跃”的) 添加隐藏类

 <option class="hidden" value="0">Все</option>
                    @foreach (var budgetCycle in Model.BudgetCycles)
                    {
                        <option class="hidden" value="@budgetCycle.Id" @(Model.Query.BudgetCycleIds?.Contains(budgetCycle.Id) ?? false ? "selected" : "")>@budgetCycle.Name</option>
                    }