Question

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

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

然而，它在IE 11中呈现的非常糟糕。见下图：

编辑：我注意到当我删除导航栏本身时，它在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>

Answer 1

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

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

编辑：它也可能是浏览器更新问题。尝试以隐身模式打开它，或尝试清除浏览器历史记录。我在ie11结束时打开了片段，似乎工作得非常好。你有这个页面的链接吗？

Bootstrap 4导航栏在IE11中无法正确渲染

1 个答案: