iOS 上的 CSS 与 Android 上的不同？答案

【问题标题】：CSS is different on iOS than Android?iOS 上的 CSS 与 Android 上的不同？
【发布时间】：2018-07-11 12:53:28
【问题描述】：

这个网站是在 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;
}

【问题讨论】：

标签： android ios css processwire

【解决方案1】：

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

【讨论】：