简体   繁体   English

android浏览器上的链接问题

[英]links issue on stock android browser

I'am working on mobile version of an existing site and i can't resolve the issue with links in the menu. 我正在使用现有网站的移动版本,但是菜单中的链接无法解决问题。
The problem occurs only on stock android browser. 该问题仅发生在股票android浏览器上。 On Chrome, firefox, safari and even IE the site works fine. 在Chrome,Firefox,Safari和IE上,该网站都可以正常运行。 All other links on the site are working fine. 该网站上的所有其他链接都工作正常。 Here is the link to the site if you would like to test it --> www.antiqpalace.com. 如果您想对其进行测试,这是该站点的链接-> www.antiqpalace.com。

code description: original site had a "main menu" and "left menu" and i moved some elements from "left menu" to "main menu". 代码说明:原始站点有一个“主菜单”和“左菜单”,我将某些元素从“左菜单”移到了“主菜单”。 Then I redesigned the main menu to specification and hide it with display:none. 然后,我重新设计了主菜单以指定规格,并使用display:none将其隐藏。 If you click on menu button JS changes display to block. 如果单击菜单按钮,则JS更改显示为阻止。

What I have tried: 我试过的

  • changing parent div position to absolute. 将父div位置更改为绝对位置。 that did not work, there were major scrolling issues. 那行不通,存在主要的滚动问题。

  • adding JQ .click events to a elements. 将JQ .click事件添加到元素。 the result was un-changed. 结果保持不变。 everything still works on chrome... but links remain unclickable in stock android browser. 一切仍然适用于chrome。。。但是在库存的android浏览器中,链接仍然不可点击。

  • i add css --> a{background-color:blue} to see what happends on phone and links are positiond fine, just un-clickable. 我添加css-> a {background-color:blue}来查看电话上发生了什么,并且链接的位置很好,只是不可单击。
  • I have googled that there was/is issue with links and -webkit-transform but i don't have that line in my CSS. 我已经在Google上搜索到链接和-webkit-transform存在问题,但我的CSS中没有该行。

HTML: 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: 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;
    }

I don't know if it's ok to respond to my own question but I have solved the issue and don't know where to post the solution. 我不知道是否可以回答我自己的问题,但我已经解决了该问题,并且不知道在哪里发布解决方案。

Actual error: Actual error was an issue with position fixed and links inside that . 实际错误:实际错误是位置固定和其中的链接存在问题。 Andriod browser displays links but are un-clickable. Andriod浏览器显示链接,但不可单击。 Visuali everything looks ok just does not work. Visuali看起来一切正常,只是行不通。

Fix: I changed the position of the element to static and added com css to rewrite old css. 修复:我将元素的位置更改为静态,并添加了COM CSS来重写旧的CSS。

Design issue: This is not a optimal fix because the menu is inserted in the page and not on top of it. 设计问题:这不是最佳解决方案,因为菜单插入在页面中而不是页面顶部。 I'm not sure which browsers have issues with fixed positioning so I added code to CSS file. 我不确定哪些浏览器的固定位置有问题,因此我向CSS文件中添加了代码。 If you have a similar problem you can indentify the browser and add code only to that browser 如果您遇到类似的问题,则可以识别浏览器并将代码仅添加到该浏览器

Here is link to css an at the bottom I added the code that fixed this problem. 这是底部的CSS链接,我添加了解决此问题的代码。 http://www.antiqpalace.com/sites/www.antiqpalace.com/themes/antiqpalace/css/antiq_mobile.css http://www.antiqpalace.com/sites/www.antiqpalace.com/themes/antiqpalace/css/antiq_mobile.css

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM