Question

我正在使用Bootstrap v4.0.0-alpha.6，并且在Safari浏览器的导航菜单（从8向下）中遇到了一些问题。

左侧徽标是图片，Safari上未显示右侧的两个按钮（“ Login”，“ Sign Up”），我使用了在线测试网站来模拟Safari 6，并检查了元素，看到它们在Dom中并且在标题中留有空格，但是没有显示出来。

实时预览：

.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 -->

是什么原因导致此问题以及如何解决？！

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

0 个答案: