html - Safari 的标题上未显示徽标和按钮

Question

我正在使用 Bootstrap v4.0.0-alpha.6，从 8 开始，我在 Safari 上的导航菜单遇到了一些问题。

左侧的徽标是一个图像，右侧的两个按钮（“登录”，“注册”）未在 Safari 上显示，我使用实时测试网站来模拟 Safari 6，我检查了元素，我看到它们在 Dom 中并在标题中占据空间，但没有一个显示。

这是一个小提琴：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 -->

是什么导致了这个问题以及如何解决它？！

标签： htmlcsstwitter-bootstrapsafaribootstrap-4