iPad3上的文字重复

时间:2014-02-21 11:17:32

标签: jquery css

我有一个最奇怪的问题。我的客户声称网页上的文字...在iPad 3上重复。这很简单<p>(也尝试了<small><h5>等。

代码看起来像这样:

<section id="slider">
    <nav class="hide-mobile"><a class="left slider-prev" href=""><i class="icon-left-open"></i></a><a class="right slider-next" href=""><i class="icon-right-open"></i></a></nav>
    <ul class="cycle-slideshow" data-cycle-slides="> li" data-cycle-fx="scrollHorz" data-cycle-prev=".slider-prev" data-cycle-swipe="true" data-cycle-speed="500" data-cycle-timeout="2500" data-cycle-next=".slider-next" data-cycle-pause-on-hover="true" data-cycle-youtube="true">
            <li style="background-image: url('http://192.168.1.69/red/wp-content/uploads/2014/02/slide-1024x526.jpg')">
            <div class="container">
                                    <div class="row"><h2>Slide title #2</h2></div>
                    <div class="row"><div class="video"><iframe width="420" height="315" src="//www.youtube.com/embed/d2pz7v4V-Qk" frameborder="0" allowfullscreen></iframe></div></div>
                            </div>
        </li>
            <li style="background-image: url('http://192.168.1.69/red/wp-content/uploads/2014/02/slide-1024x526.jpg')">
            <div class="container">
                                    <div class="row"><h2>Slide title #1</h2></div>
                    <div class="row"><p>Smple description</p></div>
                            </div>
        </li>
        </ul>
</section>

的CSS:

#slider {
  border-bottom: 3px solid #ae0000;
  position: relative;
}

#slider a.left,
#slider a.right {
  position: absolute;
  top: 45%;
  z-index: 9999;
  font-size: 72px;
  color: #fbf9f2;
  text-shadow: 0 0 75px #000000;
  opacity: .5;
  -webkit-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
}

#slider a.left:hover,
#slider a.right:hover {
  opacity: 1;
}

#slider a.left {
  left: 2.5%;
}

#slider a.right {
  right: 2.5%;
}

#slider ul {
  width: 100%;
}

#slider ul li {
  height: 100% !important;
  width: 100%;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center;
}

#slider div.container {
  position: relative;
  height: 100%;
  background: url("images/coming.png") no-repeat bottom center;
}

#slider div.container h2,
#slider div.container h5,
#slider div.container p {
  font: 800 48px/2em "Averia Serif Libre", cursive;
  -webkit-text-stroke: 0.2px;
  color: #fbf9f2;
  text-shadow: 0 0 75px #000000;
  text-align: center;
  display: block;
  width: 100%;
}

#slider div.container h2 {
  padding-top: 175px;
}

#slider div.container p {
  position: absolute;
  top: 300px;
  left: 0;
}

#slider div.container small,
#slider div.container p {
  font-size: 18px;
}

#slider div.container div.video {
  text-align: center;
}

#slider div.container div.video iframe {
  display: block;
  margin: auto;
  -webkit-box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.5);
}

@media (max-width: 767px) {
  #slider div.container div.video iframe {
    max-width: 100% !important;
    max-height: 100% !important;
  }
}

我在没有.row的情况下尝试过,在一个标签内等。没有任何帮助。代码在<li>内,并由Cycle2插件移动。我试过禁用它,是的。

我该怎么办?这是iPad3特有的错误,无处可见。

0 个答案:

没有答案