我正在开发一个支持滑动手势的网站。在每张幻灯片中，我有几个链接可供用户单击并浏览到不同的位置。问题是，非常奇怪的是，我的链接在 iPad 上不起作用。它们在浏览器中完美运行。
我检查了所有 Z-Index 等，甚至放在绝对位置，但无济于事。我的 CSS 和 HTML 已发布，但不要复制它，我建议如果你能看到我正在使用的框架，你可以去dragend并在 iPad 中打开这个网站。现在单击链接，您会惊讶地发现此站点上的链接在 iPad 上无法使用，但在普通浏览器上可以使用。
CSS
#contend {
border-top: 13rem solid transparent;
/*border-bottom: 4rem solid transparent;*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
#swipe-container {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s ease-in-out;
-moz-transition: opacity 0.6s ease-in-out;
-o-transition: opacity 0.6s ease-in-out;
-ms-transition: opacity 0.6s ease-in-out;
transition: opacity 0.6s ease-in-out;
cursor: hand;
cursor: -moz-grab;
cursor: -webkit-grab;
cursor: grab;
}
.confine {
max-width: 100%;
}
#swipe-container .page-content {
padding: 2rem 6rem;
position: relative;
text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
width: 100%;
height: 100%;
}
#swipe-container .page-content:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
#swipe-container p {
font-size: 1.5rem;
line-height: 2.6rem;
margin-bottom: 2rem;
border-radius: 5px;
}
.page-content p,.page-content ul,h3 {
background: rgba(242,242,242,0.4);
-webkit-box-shadow: 0 0 50px rgba(242,242,242,0.4);
box-shadow: 0 0 50px rgba(242,242,242,0.4);
}
#swipe-container > div > ul ul {
margin: 0 0 2rem 2.5rem;
font-size: 1.7rem;
line-height: 2.3rem;
}
#swipe-container > div {
list-style: none;
background: url(../imgs/bgbg.png) repeat-x 0 0;
background-color: #fff;
}
#swipe-container > div > ul {
padding: 0;
}
#swipe-container li {
margin-bottom: 0.5rem;
}
.page {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border-top: 5px solid transparent !important;
border-bottom: 20px solid transparent !important;
}
#pos2{
position:fixed;
display: block;
overflow:hidden;
-webkit-overflow-scrolling:touch;
width:50px;
height:50px;
background-color: yellow;
}
#pos1:hover, #pos2:hover{
border:1px solid red;
}
HTML
<div id="contend">
<div id="swipe-container">
<ul id="pages">
<!-- meet the team-->
<li class="page">
<div class="page-content">
<div class="link-slide-team">
<a href="cnn.com"> <div id="pos1"></div></a>
<a> <div id="pos2"></div></a>
</div>
</div>
</li>
</ul>
</div>
</div>