android - iOS 上的 CSS 与 Android 上的不同吗？

Question

此站点是在 ProcessWire CMS 中构建的，因此导航是 PHP

这可能最好用图片来解释。

This is how the nav should look

And this is how it looks

我完全不知所措。我已经在导航上尝试了 z-index: 999 并且没有任何效果。我在 Android (Galaxy S8) 上使用 Chrome 和 Edge 时完全没有遇到任何问题，但是我的同事都在使用 iPhone 7，他们告诉我导航隐藏在机身后面。

<div class="nav-mobile pure-u-1" id="menu" style="z-index: 999">
        <ul class="navbar-mobile pure-img pure-u-1" style="z-index: 999
        ">
            <img src="<?php echo $config->urls->templates?>images/crest.png">
            <div class="icon-center">
                <i class="fa fa-bars fa-4x icon" id="openbtn" onclick="openMenu()"></i>
            </div>
            <?php

            $homepage = $pages->get("/");
            $children = $homepage->children;
            $children->prepend($homepage);

            foreach($children as $child) {
                $class = $child === $page->rootParent ? " class='on'" : '';
                echo "<li class='pure-u-1-9 font' ><a$class href='{$child->url}'>{$child->title}</a></li>";
            }
            ?>
            <div>
                <li class='pure-u-1-9 font' onclick="closeMenu()">Close</li>
            </div>
        </ul>
    </div>

nav {
    display: none;
}
.foot footer {
    width: 100%;
}
.nav-mobile {
    display: inline-block;
}
.nav-mobile li {
    display: none;
}
.icon-center {
    display:inline-block;
    vertical-align: middle;
    width: 100%;
    text-align: center;
}
.nav-mobile .icon{
    display: inline-block !important;
    margin: auto;
}
.navbar-mobile img {
    width: 15%;
    margin: auto;
    display: block;
}
.opening {
    margin-top: 185px;
    text-align: center;
}
.page-mid {
    margin-top: 185px;
}
.navbar-mobile {
    margin-bottom: 0;
    margin-top: 10px;
}

.mobile-menu li {
    display: block;
    text-align: center;
}

.fb-page {
    max-width: 400px;
}

Answer 1

要给出一个好的答案，需要更多代码或一个工作示例。但我看到无效标记，例如一个<div>作为 <ul> 的 child .仅此一项就可能导致渲染问题。