对于 MVC 网站中的某些用户，CSS 无法正确加载？

Question

我开发了一个带有引导程序和 CSS 的 Asp.Net MVC 应用程序。 该网站对某些用户无法正常工作，其布局未显示我创建的那个。

我希望网站在每个系统和每个浏览器上都能正常工作。 谁能帮忙？？

我在下面分享我的布局页面 html 代码：

    @*<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">*@
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
    <title>@ViewBag.title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="~/Scripts/moment.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
      
    <link href="~/Content/css/styles.css" rel="stylesheet" />   -- custom stylesheet
    <script src="~/Content/js/script.js"></script>

    <link href="~/Content/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-ui-1.12.1.js"></script>
    <link href="~/Content/css/icofont/icofont.min.css" rel="stylesheet" />
    <link href="~/Content/css/boxicons/css/boxicons.min.css" rel="stylesheet" />
    </head>

不同IE版本的一些截图：

使用 IE 10/11 -- 这是实际设计

使用 IE 9

使用 IE 8

登录.cshtml

<div class="row mt-5">
                  <div class="col-6 col-sm-6 offset-3 bodyColor" style="border-radius: 25px;">
                      <div class="col-8 col-sm-8 offset-2">
                          <div style="max-width: 400px;">                              
                              <div class="text-center section-title">
                                  <h2>Login</h2>
                              </div>
                              @Html.LabelFor(model => model.UserName)
                              <div class="input-group form-group">
                                  <div class="input-group-prepend">
                                      <span class="input-group-text date-Textbox"><i class="fa fa-user"></i></span>
                                  </div>
                                  @Html.TextBoxFor(model => model.UserName, new { @class = "form-control textbox-font" })
                                  @Html.ValidationMessageFor(model => model.UserName, "", new { @class = "textRed" })
                              </div>
                              @Html.LabelFor(model => model.Password)
                              <div class="input-group form-group">
                                  <div class="input-group-prepend">
                                      <span class="input-group-text date-Textbox"><i class="fa fa-lock"></i></span>
                                  </div>
                                  @Html.TextBoxFor(model => model.Password, new { @class = "form-control textbox-font", type = "password" })
                                  @Html.ValidationMessageFor(model => model.Password, "", new { @class = "textRed" })
                              </div>
                              @Html.CheckBoxFor(model => model.RememberMe)
                              @Html.LabelFor(model => model.RememberMe)

                              <input type="hidden" name="ReturnUrl" value="@Request.QueryString["ReturnUrl"]" />
                              <div class="col-sm-12 col-xs-12">
                                  <input type="submit" value="Login" id="btnLogin" style="width:100%;" autofocus class="btn btn-main-custom" />
                                 

                              </div>
                          </div>
                      </div>
                      <br />
                      <br />                    
                  </div>                
                      <div class="col-sm-12 textRed text-center fontSizeLabel">
                          <p><b>(Login with Windows Username/Password)</b></p>
                      </div>                
                  <br />               
              </div>

请让我知道相同的解决方案....提前谢谢...

Answer 1

尝试在关闭</head>标签之前移动<link href="~/Content/css/styles.css" rel="stylesheet" />这个：

@*<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">*@
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
        <title>@ViewBag.title</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="~/Scripts/moment.min.js"></script>
        <script src="~/Scripts/jquery.validate.min.js"></script>
        <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
          
        
        <script src="~/Content/js/script.js"></script>
    
        <link href="~/Content/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" />
        <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
        <script src="~/Scripts/jquery-ui-1.12.1.js"></script>
        <link href="~/Content/css/icofont/icofont.min.css" rel="stylesheet" />
        <link href="~/Content/css/boxicons/css/boxicons.min.css" rel="stylesheet" />

        <link href="~/Content/css/styles.css" rel="stylesheet" />   -- custom stylesheet

        </head>