链接在浏览器中工作，但在iPad中不起作用

Question

我正在开发一个支持滑动手势的网站。在每张幻灯片中，我有几个链接，用户可以点击并浏览到不同的位置。问题非常奇怪，我的链接无法在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>

Answer 1

尝试将<a href="cnn.com">更改为<a href="http://www.cnn.com">。