鏈接在瀏覽器中有效，但在iPad中不起作用

Question

我正在一個支持滑動手勢的網站上工作。 在每張幻燈片中，我只有幾個鏈接，用戶可以單擊並瀏覽到不同的位置。 問題和非常奇怪的是，我的鏈接在iPad中不起作用。 它們在瀏覽器中完美運行。

我檢查了所有Z索引，等等，甚至放在絕對位置，但無濟於事。 我的CSS和HTML已發布，但是如果您不能看到我正在使用的框架，則建議不要復制它，而可以拖動並在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"> 。