Question

我正在从Windows上的Safari 5浏览网站，看来导航菜单中存在问题。

我在左侧看不到徽标，在右侧看不到两个登录/注册按钮。

当我从float: left的{{1}}中删除.float-left时，将显示徽标。

当我对两个按钮的容器中的navbar-brand做同样的事情时，两个按钮都会出现。

代码：

.float-right

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

我在所有父元素上都尝试过 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.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">  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/js/tether.min.js"></script>  <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>  </div>  <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>  </nav> ，但是没有用。

我不想将overflow: hidden替换为float，并将每个元素的特定宽度替换掉。

那还有什么选择？

Answer 1

首先，为什么要使用Alpha版本4.0.0-alpha.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 -->

Safari上的浮动问题

1 个答案: