我正在使用bootstrap开发一个wordpress网站。我有一个设置为100vh的旋转木马。这在除safari之外的所有浏览器中都能正确显示。下面是代码。
以下是relvant css代码：
(function( $ ) {
//Function to animate slider captions
function doAnimations( elems ) {
//Cache the animationend event in a variable
var animEndEv = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
elems.each(function () {
var $this = $(this),
$animationType = $this.data('animation');
$this.addClass($animationType).one(animEndEv, function () {
$this.removeClass($animationType);
});
});
}
//Variables on page load
var $myCarousel = $('#carousel-example-generic'),
$firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");
//Initialize carousel
$myCarousel.carousel();
//Animate captions in first slide on page load
doAnimations($firstAnimatingElems);
//Pause carousel
<!--$myCarousel.carousel('pause');-->
//Other slides to be animated on carousel slide event
$myCarousel.on('slide.bs.carousel', function (e) {
var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
doAnimations($animatingElems);
});
})(jQuery);.fill {
width: 100%;
height: 100vh;
-webkit-height:1000px;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: 100% 100%;
-o-background-size: cover;
}
#mycarousel {
max-height: 100vh;
}
.carousel,
.item,
.active {
padding-top:0;
height: 100%;
z-index:2;
}
.carousel h1 {
font-size: 50px;
}
.carousel h2 {
font-size: 2.5em;
box-shadow: none;
padding: 2%;
text-shadow: none;
font-weight: 500;
}
.carousel h3 {
font-size: 1.2em;
box-shadow: none;
padding: 2%;
margin-top: 10px;
text-shadow: none;
font-weight: 300;
}
.carousel-inner {
/*height: 100%;*/
height:calc(100vh - 115px);
margin:0 auto;
}
.carousel-caption {
position: absolute;
right: 37%;
bottom: 20px;
left: 37%;
bottom: 40%;
margin-right:auto;
margin-left: auto;
max-width: 26%;
min-height: 5%;
color: #caaa77;
font-size: 1.2em;
background-color:rgba(255, 255, 255, 1.0);
padding: 5px 20px;
text-align:center;
/* border: 5px solid #caaa77;*/
animation-delay: 0.5s;
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-o-animation-delay: 0.2s;
-moz-transition: none !important;
}
.carousel-caption p {
color: #1d2532;
padding: 2% 20%;
text-shadow: none;
font-style: italic;
}
.carousel-caption p a {
text-decoration: none;
color: #1d2532;
}
.carousel-indicators {
bottom: 30%;
}
.carousel.fade {
opacity: 1;
}
.carousel.fade .item {
transition: opacity ease-out linear 1.7s;
left: 0;
opacity: 0; /* hide all slides */
top: 0;
position: absolute;
width: 100%;
display: block;
}
.carousel.fade .item:first-child {
top: auto;
/*opacity: 1; /* show first slide */
position: relative;
}
.carousel.fade .item.active {
opacity: 1;
}
.carousel.icon-prev {
background-color: #FFF;
padding: 10px 8px;
position: absolute;
margin-left: -95px;
top: 45%;
z-index: 5;
display: inline-block;
}
.carousel.icon-next {
background-color: #FFF;
padding: 10px 8px;
position: absolute;
margin-left: 67px;
top: 45%;
z-index: 5;
display: inline-block;
}
.side-controls-block {
position: absolute;
bottom: 0;
right: 30px;
/*top: 10px;*/
display: block;
width: 80px;
margin: 0 auto;
z-index: 2;
height: 24px;
text-align: center;
}
.side-controls-block div {
display: inline-block;
vertical-align: middle;
z-index: 1;
}
.side-controls-block a {
display: inline-block;
border-radius: 50%;
}
.side-controls-block a:hover {
color:#1d2532;
}
.side-controls-block.chev-left a:hover {
border: 0.1em solid #1d2532;
}
.side-controls-block a:hover.chev-left:after, a:hover .right:after a:hover:down {
border-top: 0.1em solid #caaa77;
border-right: 0.1em solid #caaa77;
}
.side-controls-block.chev-left {
display: inline-block;
width: 3em;
height: 3em;
border: 0.1em solid #caaa77;
border-radius: 50%;
margin-right: 1.5em;
}
.side-controls-block.chev-left:after {
content: '';
display: inline-block;
margin-top: 0.7em;
margin-left: 0.6em;
width: 1.4em;
height: 1.4em;
border-top: 0.1em solid #caaa77;
border-right: 0.1em solid #caaa77;
-moz-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.side-controls-block.chev-right {
display: inline-block;
width: 3em;
height: 3em;
border: 0.1em solid #caaa77;
border-radius: 50%;
margin-left: 1.5em;
}
.side-controls-block.chev-right:after {
content: '';
display: inline-block;
margin-top: 0.7em;
margin-left: -0.6em;
width: 1.4em;
height: 1.4em;
border-top: 0.1em solid #caaa77;
border-right: 0.1em solid #caaa77;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.down-controls-block {
position: absolute;
bottom: 30px;
/*top: 10px;*/
display: block;
width: 100%;
margin: 0 auto;
z-index: 2;
height: 24px;
text-align: center;
}
.down-controls.chev-down {
display: inline-block;
width: 3em;
height: 3em;
margin-left: 1.5em;
}
.down-controls.chev-down:after {
content: '';
display: inline-block;
margin-top: 0.7em;
margin-left: -0.6em;
width: 1.4em;
height: 1.4em;
border-top: 0.1em solid #caaa77;
border-right: 0.1em solid #caaa77;
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
transform: rotate(120deg);
}
.carousel-control {
position: absolute;
bottom: 30px;
/*top: 10px;*/
display: block;
z-index: 2;
}
.carousel-control .icon-prev,
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
position: absolute;
top: 60%;
z-index: 3;
display: inline-block;
margin-top: -10px;
}
.carousel-image {
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: cover;
}
Here is the carousel code from the page itself: <header id="carousel-example-generic" class="carousel" data-interval="10000" data-pause="false">
<!-- Indicators -->
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class=" item active">
<!-- Set the first background image using inline CSS below. -->
<div class=" fill animated kenburns-top carousel-image" style="background-image:url('<?php the_field('carousel_grid_image_1');?>')"></div>
<div data-animation="animated fade-in-auto one" class="carousel-caption">
<img>
<h3 data-animation="animated fade-in-auto one">
<?php the_field('carousel_title_1'); ?>
</h3>
<p data-animation="animated fade-in-auto one">
<a href="<?php the_field('carousel_link_1'); ?>"><?php the_field('carousel_subtitle_1'); ?></a>
</p>
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill animated kenburns-top" style="background-image:url('<?php the_field('carousel_grid_image_2'); ?>');"></div>
<div data-animation="animated fade-in-auto one" class="carousel-caption">
<img>
<h3 data-animation="animated fade-in-auto one">
<?php the_field('carousel_title_2'); ?>
</h3>
<p data-animation="animated fade-in-auto one">
<a href="<?php the_field('carousel_link_2'); ?>"><?php the_field('carousel_subtitle_2'); ?></a>
</p>
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill animated kenburns-top" style="background-image:url('<?php the_field('carousel_grid_image_3'); ?>');"></div>
<div data-animation="animated fade-in-auto one" class="carousel-caption">
<img>
<h3 data-animation="animated fade-in-auto one">
<?php the_field('carousel_title_3'); ?>
</h3>
<p data-animation="animated fade-in-auto one">
<a href="<?php the_field('carousel_link_3'); ?>"><?php the_field('carousel_subtitle_3'); ?></a>
</p>
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill animated kenburns-top" style="background-image:url('<?php the_field('carousel_grid_image_4'); ?>');"></div>
<div data-animation="animated fade-in-auto one" class="carousel-caption">
<img>
<h3 data-animation="animated fade-in-auto one">
<?php the_field('carousel_title_4'); ?>
</h3>
<p data-animation="animated fade-in-auto one">
<a href="<?php the_field('carousel_link_1'); ?>"><?php the_field('carousel_subtitle_4'); ?></a>
</p>
</div>
</div><!-- /.item -->
</div><!-- /.carousel-inner -->
</div><!-- /.carousel -->
<!-- Controls -->
<div class="side-controls-block">
<div class="controls">
<a class="left carousel-control animated fade-in-auto one" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="side-controls-block chev-left"></span>
</a>
<a class="right carousel-control animated fade-in-auto one" href="#carousel-example-generic" role="button" data-slide="next">
<span class="side-controls-block chev-right"></span>
</a>
</div><!--/.controls -->
如果我更改.fill css使高度：300px;而不是高度：100vh;它会显示出来。
有谁知道我哪里出错了？