Question

我为客户创建了一个网站，除了在iPhone上外，还加载了很棒的网站。

我在Windows PC，Android手机，Windows上的Safari上都使用了模拟器......一切正常。但是在iPhone上它会变得很糟糕。

问题在于：

在加载菜单时，在响应模式（小于1024px）中，应该有“关闭”和“菜单”以及其他菜单项。但是在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>

Answer 2

我放弃了，只是将菜单向下移动，这样它就不会与背景图像重叠。

这不是解决方案，只是承认失败。

iPhone上显示响应式菜单的问题（z-index？）

2 个答案: