CSS在iOS和Android上有所不同吗？

Question

这个网站是用ProcessWire CMS建立的，因此导航栏使用了PHP

最好通过图片来解释。

这是导航栏应该显示的样子

而这就是实际效果

我完全被搞糊涂了。我已经在导航栏上尝试了z-index: 999，但没有任何影响。我自己使用的是安卓（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;
}

- samscript

Answer 1

为了给出一个好的答案，需要更多的代码或工作示例。但是我发现无效的标记，例如将 <div> 作为 <ul> 的子元素。这本身可能会导致渲染问题。

- bitstarr