iOS 上的 CSS 与 Android 上的不同？

Question

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

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

这就是导航的外观

这就是它的样子

我完全不知所措。我试过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

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