Question

以下代码可在Google Chrome或其他浏览器中完美运行。但是，当在iPhone上使用野生动物园进行测试时，底部的下拉菜单不会出现。但是，当我单击屏幕时，它会转到菜单。菜单是可操作的，但屏幕上没有任何内容。这是什么原因呢？当我在菜单中添加位置：固定时，就会出现此信息。但我不想将其固定在屏幕上。任何帮助，我将不胜感激。

   .navbar-nav {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .nav>li {
        position: initial;
        display: block;
        transition: all 0.6s ease;
    }
    #menu div.dropdown-menu {
        margin-left: 0 !important;
        padding-bottom: 10px;
        background-color: #FFF;
        border: none;
        overflow-y: auto;
        border-radius: 0px;
        width: 100%;
    }
    .dropdown_mobile {
        background: #FFF;
        width: 100%;
        min-height: 40px;
        display: inline-table;
        align-items: center;
        transition: all 0.6s ease;
    }
    #menu .dropdown-inner {
        display: flex;
    }
    #menu div.dropdown-inner > ul.list-unstyled {
        display: flex;
    }
    #menu .dropdown-inner li {
        margin: 5px;
        padding-top: 5px;
        padding-bottom: 10px;
    }
    #menu .dropdown-inner a {
        font-family: Century Gothic, sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: #FFF;
    }

    <li class="dropdown open">
              <a href="http://localhost/albigelsin/index.php?route=product/category&amp;path=20" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Fruits</a>
              <div class="dropdown-menu" style="">
                  <div class="dropdown_mobile">
                      <div class="dropdown-inner">                     <ul class="list-unstyled">
                                                <li><a href="http://localhost/albigelsin/index.php?route=product/category&amp;path=20_26">Apple</a></li>
                                                <li><a href="http://localhost/albigelsin/index.php?route=product/category&amp;path=20_27">Banana</a></li>
                                              </ul>
                                          </div>      
                  </div>
              </div>
            </li>

谷歌浏览器的底部下拉菜单起作用

无法在SAFARI（iPHONES）上使用底部下拉菜单

Answer 1

当transition-property为all时，Safari似乎不太支持。

此外，应添加-webkit-transition以更好地支持Safari。

尝试更改此内容：

.nav>li {
    transition: all 0.6s ease;
}
.dropdown_mobile {
    transition: all 0.6s ease;
}

对此：

.nav>li {
    transition: 0.6s ease;
    -webkit-transition: 0.6s ease;
}
.dropdown_mobile {
    transition: 0.6s ease;
    -webkit-transition: 0.6s ease;
}

Answer 2

这是由于下拉菜单的大小。可以通过添加高度或边距底部来解决此问题。我在下面更改了我的CSS文件，现在可以正常使用了。例如，如果顶部菜单的大小为70px ，则弹出的菜单为120px 。但是，由于菜单的大小为70px ，因此该下拉菜单不会出现在野生动物园中。我通过添加 margin-bottom：70px 来解决此问题，并将 * top 固定在下拉菜单中。

CSS;

#menu div.dropdown-menu {
    margin-left: 0 !important;
    padding-bottom: 10px;
    background-color: #FFF;
    border: none;
    overflow-y: auto;
    border-radius: 0px;
    width: 100%;
    top: 80px;
    margin: 0;
    padding: 5px;
}
.navbar-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 70px;
    margin-top: 0;
    background-image: linear-gradient(to right, rgb(254, 202, 56) 0%, rgb(245, 130, 32) 51%, rgb(250, 69, 3) 100%);
}

为什么下拉菜单没有出现在Safari中？

2 个答案: