Question

这只是我在Safari中遇到的一个问题。在chrome和firefox中，我的导航栏品牌和可折叠导航系统在移动设备的同一行上排队。

在safari中，在移动视图中，可折叠导航按下页面，与品牌不符。这仅在导航折叠时发生。

在小断点之上，导航是一个普通的菜单，水平分布的链接，他们在safari，firefox和chrome中正确排列品牌。

我该怎么做才能解决这个问题？我已经尝试将一个浮动应用于崩溃div，我在类似的帖子中看到了这个解决方案，但它没有用。如何设置它以使nav-brand中的徽标是唯一可点击的部分，而不是屏幕的整个顶部是链接？

品牌似乎显示得太宽，因为它使整个屏幕顶部成为链接，而不仅仅是品牌徽标图像。这也发生在chrome中，但它不会导致切换按下。

编辑：我为导航栏品牌链接设置了最大宽度。这使得整个页面的顶部不再是该链接，但是可切换的导航栏仍然在Safari中被按下。我还有一个保证金 - 适用于超过768px的UL，但我在断点之外将其从UL中取出。 This is what's happening. It happens with the navbar toggle collapsed and expanded.

您可以在此bootply中看到问题：https://www.bootply.com/qlBBAGHYvU （我更改了导航栏文本的颜色以显示但无法弄清楚为什么切换导航不可见，但它位于视口右侧的左侧，并且位于黑色导航栏栏下方。）

    <nav class="navbar navbar-toggleable-sm navbar-inverse fixed-top">

    <a class="navbar-brand" href="#page-top" style="max-width:20%;"><img class="img-fluid" src="backgroundimages/logoSmall.png"></a>
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarResponsive">
    <ul class="navbar-nav">
      <li class="nav-item navMenuBox">
        <a class="nav-link navmenu" style="display:block;" href="#howto">How to Use</a>
      </li>
      <li class="nav-item navMenuBox">
        <a class="nav-link navmenu" style="display:block;" href="#Mappy">Map</a>
      </li>
      <li class="nav-item navMenuBox">
        <a class="nav-link navmenu" style="display:block;" href="#about">About</a>
      </li>
        <li class="nav-item navMenuBox">
        <a class="nav-link navmenu" style="display:block;" href="#contact">Contact</a>
      </li>

    </ul>
  </div>
</nav>

相关的css：

    ul {
width:100%;
background-color: #611B81;
}

    li {
padding-left: 2%;
text-align: center;
    }

    li:hover {
background-color: #7E157D;
    }

            /* styles nav items & adds hover effects*/

    @media (max-width: 575px) {
    .navmenu {
        border: 0px;
        padding-right: 20%;
        display: table;
        text-align: center;
        color: #fff;
        box-sizing: border-box;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        display: inline-block;
        font-family: 'Quicksand', sans-serif;
    }
        }

    @media (min-width: 768px) {
       .navMenuBox {
        margin-right: 5%;
    } 
        .navmenu {
        border: 2px solid #fff;
        padding-right: 20%;
        display: table;
        text-align: center;
        color: #fff;
        box-sizing: border-box;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        display: inline-block;
        font-family: 'Quicksand', sans-serif;

    }

     .navmenu:link {
        outline: 2px solid #fff; 
        border: 4px solid transparent;
       padding-right: 20%;
        display: table;
        text-align: center;
        color: #fff;
    }

    .navmenu:visited {
        outline: 2px solid #fff;
        border: 4px solid transparent;
        display: table;
        text-align: center;
        color: #fff;
    }

    .navmenu:hover {
        outline: 2px solid #fff;
        border: 4px solid #fff;
        display: table;
        text-align: center;
        color: #fff;
    }

    .navmenu:active {
        outline: 2px solid #fff;
        border: 4px solid #fff;
        display: table;
        text-align: center;
        color: #fff; 

    } 

    }

safari问题 - 导航栏品牌按下可切换的导航栏

0 个答案: