2

我正在开发现有网站的移动版本,但无法通过菜单中的链接解决问题。
该问题仅出现在股票 android 浏览器上。在 Chrome、firefox、safari 甚至 IE 上,该网站都可以正常工作。网站上的所有其他链接都工作正常。如果您想测试它,这里是该站点的链接 --> www.antiqpalace.com。

代码描述:原始站点有一个“主菜单”和“左菜单”,我将一些元素从“左菜单”移动到“主菜单”。然后我重新设计了主菜单以指定并使用 display:none 隐藏它。如果单击菜单按钮 JS 将显示更改为阻止。

我试过的:

  • 将父 div 位置更改为绝对位置。这不起作用,存在重大的滚动问题。

  • 将 JQ .click 事件添加到元素。结果没有改变。一切仍然可以在 chrome 上运行......但在现有的 android 浏览器中,链接仍然无法点击。

  • 我添加了 css --> a{background-color:blue} 来查看手机上发生了什么,并且链接的位置很好,只是不可点击。
  • 我用谷歌搜索链接和 -webkit-transform 存在/存在问题,但我的 CSS 中没有该行。

HTML:

<div> ---> whit a fix position and display none
   <ul class="menu" style="height: 644px;">
        <li class="first leaf menu-mlid-808">
            <a href="/about-antiq-palace-hotel-ljubljana.html" >Antiq Palace Hotel
            </a>
            <img class="DD_right_arrow" src="[some src]">
        </li>

        <li class="expanded active-trail active menu-mlid-817">
            <a href="javascript:show_sub_menu(2)" class="active-trail active">Rooms &amp; Suites
            </a>
            <ul class="menu" style="height: auto; top: 70.84px;">
                <li class="first leaf menu-mlid-823">
                    <a href="/double-bedroom-residential-suite-one-or-two.html" >Double Bedroom Residential Suite for One or Two
                    </a>
                    <img class="DD_right_arrow" src="[some src]">
                </li>
                .....
                </ul>
            <div onclick="show_sub_menu(2)" class="A_DD_submenu">
                <img class="DD_right_arrow" src="[some src]">
            </div>
        </li>
        .....
    </ul>

CSS:

ul{
        margin:0 1.5%;
        padding:0;
        border:none;
        width:97%;
        height:91%;/* js adds inline height of ful win height -51 px example(height:644px;)*/
        display:block;
        float:left;
        overflow-y:scroll;
    }
    ul li,
    ul li.first {
        padding:0;
        margin:0;
        height:auto;
        width:100%;
        background:none;
        background-color:rgba(196,154,69,1);
        display:block;
        float:left;
        border-bottom:dotted 1px rgb(214,184,124);
        position:relative;
        z-index:10000;
    }
    ul li a{
        width:70%;
        display:block;
        font-size:11.5px;
        font-weight:bold;
        padding: 23px 7%;
        text-decoration:none !important;
        float:left;
        text-align: left;
        color: white !important;
        text-transform: uppercase;
        font-family: 'Open Sans', sans-serif !important;
        letter-spacing:2px;
        line-height: 16px;
        z-index: 10000000000;
        position: relative;
    }
    ul li ul{
        width: 100%;
        margin: 0;
        overflow-y: hidden;
        display:none;
    }
    ul li ul li{
        background-color:rgb(126,118,104) !important;
        z-index:1000;
        margin-bottom: 0 !important;
    }
4

1 回答 1

4

我不知道是否可以回答我自己的问题,但我已经解决了问题并且不知道在哪里发布解决方案。

实际错误:实际错误是位置固定和内部链接的问题。Andriod 浏览器显示链接但不可点击。Visuali 一切看起来都很好,只是不起作用。

修复:我将元素的位置更改为静态并添加 com css 以重写旧 css。

设计问题:这不是最佳解决方案,因为菜单是插入页面中而不是在页面顶部。我不确定哪些浏览器存在固定定位问题,因此我将代码添加到 CSS 文件中。如果您有类似的问题,您可以识别浏览器并将代码仅添加到该浏览器

这是底部的 css 链接,我添加了解决此问题的代码。 http://www.antiqpalace.com/sites/www.antiqpalace.com/themes/antiqpalace/css/antiq_mobile.css

于 2013-11-05T14:00:18.123 回答