我正在开发现有网站的移动版本,但无法通过菜单中的链接解决问题。
该问题仅发生在原生 Android 浏览器上。在 Chrome、firefox、safari 甚至 IE 上,该网站都运行良好。网站上的所有其他链接都工作正常。如果您想测试的话,这是该网站的链接 --> www.antiqpalace.com。
代码说明: 原始网站有一个“主菜单”和“左侧菜单”,我将一些元素从“左侧菜单”移动到“主菜单”。然后我按照规范重新设计了主菜单,并使用 display:none 隐藏它。如果单击菜单按钮,JS 会将显示更改为阻止。
我尝试过的:
将父 div 位置更改为绝对位置。但这不起作用,存在严重的滚动问题。
向元素添加 JQ .click 事件。结果没有改变。一切仍然可以在 Chrome 上运行...但链接在 Android 浏览器中仍然无法点击。
- 我添加了 css --> a{background-color:blue} 来查看手机上发生的情况,链接位置很好,只是无法点击。
- 我在 google 上搜索发现链接和 -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 & 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;
}
最佳答案
我不知道是否可以回答我自己的问题,但我已经解决了问题,但不知道在哪里发布解决方案。
实际错误: 实际错误是位置固定和其中链接的问题。 Andriod浏览器显示链接但不可点击。 Visuali 一切看起来都不错,只是不起作用。
修复: 我将元素的位置更改为静态,并添加了 com css 来重写旧的 css。
设计问题: 这不是最佳修复,因为菜单插入到页面中而不是页面顶部。我不确定哪些浏览器存在固定定位问题,因此我将代码添加到 CSS 文件中。如果您遇到类似问题,您可以识别浏览器并仅向该浏览器添加代码
这里是 css 的链接,在底部我添加了解决此问题的代码。 http://www.antiqpalace.com/sites/www.antiqpalace.com/themes/antiqpalace/css/antiq_mobile.css
关于javascript - 原生 Android 浏览器上的链接问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19766212/