Поплавок на сафари

Question

Я просматриваю веб-сайт из Safari 5 в Windows, и кажется, что есть проблема в меню навигации.

Я не вижу логотип слева или две кнопки входа / регистрации направо.

Когда я удаляю float: left из .float-left, который присваивается navbar-brand, появляется логотип.

И когда я делаю то же самое с .float-rightчто дано контейнеру из 2 кнопок, появляются обе кнопки.

Вот скрипка: http://jsfiddle.net/h6rc4d7g

Код:

.btn-red{
  background: #d9534f;
  color: #fff !important
}

<!-- Fontawesome 4 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- Bootstrap v4.0.0-alpha.6 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<!-- tether -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/js/tether.min.js"></script>

<!-- Bootstrap v4.0.0-alpha.6 JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<nav class="navbar navbar-toggleable fixed-top">
  <div class="container hidden-md-down">
    <div class="navbar-collapse clearfix">
      <a class="navbar-brand float-left" href="#">
        <img class="mt-1" src="http://placehold.it/1121x171/200" width="200" alt="logo">
      </a>
      <div class="text-center" style="margin: 0 auto; margin-top: 5px; ">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link hiw-link" href="#home">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link hiw-link" href="#blog">Blog</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#contact">Contact</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#about">About</a>
            </li>
        </ul>
      </div>
      <div class="float-right ml-auto" style="margin-top: 5px; ">
        <ul class="navbar-nav float-right ">  
          <li class="nav-item">
            <a class="nav-link" href="/login">Login</a> 
          </li>
          <li class="nav-item">
            <a class="btn btn-red nav-button" href="/new">Sign up</a> 
          </li>
        </ul>
      </div>
    </div> <!-- .navbar-collapse -->
  </div> <!-- .hidden-md-down -->
  <div class="hidden-lg-up">
    <a class="navbar-brand py-0 float-left mt-3" href="#">
      <img style="margin-top: 7px" src="http://placehold.it/1121x171/200" width="150" alt="logo">
    </a>
    <a class="btn mobile_header_button float-left btn-red mt-3" href="/new">Sign up</a> 
    <a class="navbar-toggle navbar-toggler-right gray-light float-right" data-toggle="collapse-side" data-target=".side-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="fa fa-bars"></span>
      </a>
  </div> <!-- .hidden-lg-up -->
</nav> <!-- .navbar -->

Я попытался overflow: hidden на всех родительских элементах, но не сработало.

Я не хочу заменять float с display: inline-block и определенной шириной для каждого элемента.

Так, каковы альтернативы?

Answer 1

Во-первых, зачем использовать альфа-версию 4.0.0-альфа.6.Текущая стабильная версия v4.1.3.Ваш HTML кажется неполным, проверьте это:

<nav class="navbar navbar-toggleable fixed-top">
    <div class="container">
        <div class="hidden-md-down">
            ...
        </div> <!-- .hidden-md-down -->
        <div class="hidden-lg-up">
            ...
        </div> <!-- .hidden-lg-up -->
    </div>
</nav> <!-- .navbar -->