html - iPhone 上显示的响应式菜单出现问题(z-index？)

Question

我为一个客户创建了一个站点，它的加载速度非常好……除了在 iPhone 上。

我在 Windows PC、Android 手机、Windows 上的 Safari 上使用过模拟器……一切正常。但在 iPhone 上它变得不稳定。

问题是:

在响应模式下(小于 1024 像素)加载菜单时，应该有“关闭”和“菜单”以及其他菜单项。但是在 iPhone 上，“关闭”和“菜单”不会加载。这就像菜单项被我正在使用的背景图像覆盖一样。

我使用了 Z-Index，现在它在 Windows 的 Safari 上显示正常，但在 iPhone 上显示不正常。

有人可以深入了解问题并提供可能的解决方案吗？

Beta 站点位于 www.conxis.com/nmp

谢谢!

Answer 1

我看了一下代码。问题似乎出在 .menuTable 之前的所有隐藏输入。它们会干扰顶部菜单按钮。

<div class="screen">
    <input class="hidden" type="radio" name="s1" id="sub1a-open">
    <input class="hidden" type="radio" name="s1" id="sub1b-open">
    <input class="hidden" type="radio" name="s1" id="sub1c-open">
    <input class="hidden" type="radio" name="s1" id="sub1d-open">
    <input class="hidden" type="radio" name="s1" id="sub1-close">
    <input class="hidden" type="radio" name="s2" id="sub2a-open">
    <input class="hidden" type="radio" name="s2" id="sub2b-open">
    <input class="hidden" type="radio" name="s2" id="sub2c-open">
    <input class="hidden" type="radio" name="s2" id="sub2d-open">
    <input class="hidden" type="radio" name="s2" id="sub2e-open">
    <input class="hidden" type="radio" name="s2" id="sub2-close">
    <input class="hidden" type="radio" name="s3" id="sub3a-open">
    <input class="hidden" type="radio" name="s3" id="sub3b-open">
    <input class="hidden" type="radio" name="s3" id="sub3-close">
    <div class="menutablet">
        <ul>
            <li class="m-close"><label for="menu-close" title="close menu"></label>Close</li>
            <li><a href="menu.html">MENU</a></li>
            <li><a href="dinein.html">DINE IN</a></li>
            <li><a href="carryout.html">CARRY OUT</a></li>
            <li><a href="catering.html">CATERING</a></li>
            <li><a href="cheesecakes.html">CHEESECAKES</a></li>
            <li><a href="index.html">HOME</a></li>
        </ul>
    </div>
</div>