Bootstrap 4 导航栏无法在 IE11 中正确呈现

Posted 2023-05-08

【中文标题】Bootstrap 4 导航栏无法在 IE11 中正确呈现

【英文标题】：Bootstrap 4 navbar not rendering correctly in IE11

【发布时间】：2018-05-06 05:32:49

【问题描述】：

我有一个根据设计规范构建的 bootstrap 4 响应式导航栏。

它在 firefox、chrome、microsoft edge 和 opera 中正确显示。见下图：

但是它在 IE 11 中呈现得非常糟糕。见下图：

编辑：我注意到当我删除导航栏 div 本身时，它在 IE11 中运行良好，所以当我将它放入具有我在表单中的结构的导航栏中时出现问题......

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />

<link href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>


<div class="container">
  <div class="navbar navbar-light navbar-expand-md fixed-top" role="navigation">
    <div class="container">
      <a class="navbar-brand" href="#">logo here</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#loginNavbar" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>

      <div class="navbar-collapse collapse" id="loginNavbar">
        <nav class="nav ml-auto login-nav-right">

          <form method="post" role="form" class="login-form" action="#">
            <div class="row">
              <div class="col-lg-5 col-sm-5 px-2">
                <input class="form-control mr-sm-2" type="text" placeholder="Email" aria-label="Email" data-val="true" data-val-email="The Email field is not a valid e-mail address." id="Email" name="Email" value="">
              </div>

              <div class="col-lg-5 col-sm-5 px-2">
                <input class="form-control mr-sm-2" type="password" placeholder="password" aria-label="password" id="Password" name="Password">
                <a href="#" class="btn forgot-pass">Forgot Password</a>
              </div>

              <div class="col-lg-2 col-sm-2 px-2">
                <button class="btn default-btn align-right" type="submit" value="log in">log in</button>
              </div>
            </div>
          </form>
        </nav>
      </div>
    </div>
  </div>
</div>

【参考方案1】：

将您的脚本移动到页面底部的正文标记之前。

更改您的 css 链接的顺序并将引导程序放在其余链接之后，除了您自己的 css。

编辑：也可能是浏览器更新问题。尝试以隐身模式打开它，或尝试清除浏览器历史记录。我已经在 ie11 中打开了 sn-p，它似乎工作得很好。您有该页面的链接吗？

【讨论】：

当我将表单结构放入导航栏 div 时出现问题...我不知道为什么...

不是 firefox，我遇到了与 IE11 的兼容性问题，请阅读我的问题。