Сочетание как липкого, так и плавающего navbar с начальной загрузкой 4 - PullRequest
Новая
       9

Сочетание как липкого, так и плавающего navbar с начальной загрузкой 4

0 голосов
/ 05 марта 2019

Я копирую навигационную панель на основе того, что я видел на веб-сайте EA GAMES.Я получаю его нормально работать в Chrome, но не могу заставить его не выглядеть как мусор в IE.Я ищу советы о том, как мне заставить это работать, если я даже могу?

Вот мой кодовый блок: https://codepen.io/okaykaylyn/pen/bQWXqq

<!--   Fixed top    -->
<nav class="navbar sticky-top navbar-dark bg-dark justify-content-end" id="fix_nav">
<a class="navbar-brand ml-auto" href="#"><i class="fas fa-user"></i></a>
<a class="navbar-brand" href=""><i class="fas fa-cog"></i></a>

</nav>


<!--   floating nav    -->
<div class="container col-12">
<nav class="mt-3 navbar navbar-dark bg-dark navbar-expand-lg rounded" id="float_nav">
<a class="navbar-brand" href="#"> 
<img src="https://image.ibb.co/cZBKcq/Asset-2.png" id="logo"></a>
<div class="collapse navbar-collapse" id="navbarText">
 <ul class="navbar-nav mr-auto">
   <li class="nav-item active">
    <a class="nav-link text-left d-flex" href="#">Home <span class="sr-only">(current)</span></a>
  </li>
<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Accounts
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
      <a class="dropdown-item" href="#">My Accounts</a>
      <a class="dropdown-item" href="#">Agency Accounts</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Indications</a>
    </div>
  </li>
 <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Tools
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
      <a class="dropdown-item" href="#">Products & Applications</a>
      <a class="dropdown-item" href="#">Claims Examples</a>
      <a class="dropdown-item" href="#">Reports</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Fun</a>
    </div>
   </li>      
       <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      About
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
      <a class="dropdown-item" href="#">Team</a>
      <a class="dropdown-item" href="#">News</a>
      <a class="dropdown-item" href="#">Charity</a>
    </div>
  </li>
</ul>
</div>
</nav>

Соответствующая информация: EA не работаетдаже позволить пользователям IE просматривать их веб-сайт.Не уверен, что это причина, по которой ...

1 Ответ

0 голосов
/ 05 марта 2019

Из документации MDN о justify-content видно, что IE не поддерживает атрибут justify-content-end.Вот почему он выглядит не очень хорошо в IE.

Я проверил ваш код и обнаружил, что в вашей ситуации вам просто нужно удалить атрибут justify-content-end, и он будет хорошо работать как в Chrome, так и в Chrome.IE как прежде.

running result in IE11

...