我有一个最奇怪的问题。我的客户声称网页上的文字...在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特有的错误,无处可见。