Question

对于除Chrome之外的其他浏览器，我遇到了一个Twitter bootstrap carousel的巨大问题。我已经到处寻找答案，并尝试了所有的代码，但似乎没有任何帮助，我希望有人可以帮助我在这里。

在Chrome中，轮播在加载时会占用整个页面而您无需向下滚动查看图片，因为整个图片完全符合浏览器的大小，当您制作浏览器时它也会完美调整大小更小，所以你可以在平板电脑和手机上查看。这是主要的问题，这在Firefox，IE，Safari等都没有发生，因为它不会使图像在网页上完全加载，并且不像Chrome那样向上和向下滚动整个图片，似乎由于某些原因，CSS或jQuery在这些页面上不起作用，并且在Chrome上运行良好。

请检查我的代码并帮助我在这里我已经在这里工作了两个星期，试图找到解决这个问题的不同方法。

    <div class="container contentHeight">



    <div id="myCarousel" class="carousel slide tab-content">

        <ol class="carousel-indicators">

            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>

        </ol>

        <div class="carousel-inner">
            <div class="active item">
                <img src="img1.jpg" alt="Slide1" />

            </div>
            <div class="item">
                <img src="img2.jpg" alt="Slide2" />
            </div>
            <div class="item">
                <img src="img3.jpg" alt="Slide3" />
            </div>

        </div>
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>

    </div>

</div>

我使用Chrome浏览器获取页面最大高度的jQuery如下：

$(".contentHeight").css("min-height",$(window).height());

另外，感谢这里的人们，我还设法使CSS在Chrome上正常运行但在其他浏览器中失败：

.carousel .item {
    width: 100%; 
}
.carousel .item img {
    width: 100%;
    height:100%;    
}
html,body{
    height:100%;
}
.carousel,.item,.active{
    height:100%;
}
.carousel-inner{
    height:100%;
    width: 100%;
}

我真的不知道问题是什么，我猜它是CSS或jQuery但我尝试改变那些没有运气的东西。非常感谢任何帮助！

＆＃13;

$(".contentHeight").css("min-height",$(window).height());

＆＃13;

.carousel .item {
    width: 100%; 
}
.carousel .item img {
    width: 100%;
    height:100%;    
}
html,body{
    height:100%;
}
.carousel,.item,.active{
    height:100%;
}
.carousel-inner{
    height:100%;
    width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<div class="container contentHeight">
  <div id="myCarousel" class="carousel slide tab-content">
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <div class="carousel-inner">
      <div class="active item">
        <img src="http://placehold.it/550x550" alt="Slide1" />
      </div>
      <div class="item">
        <img src="http://placehold.it/551x551" alt="Slide2" />
      </div>
      <div class="item">
        <img src="http://placehold.it/552x552" alt="Slide3" />
      </div>
    </div>
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
  </div>
</div>

＆＃13;

Answer 1

如果您希望height和width真正成为页面使用视口单元的百分比。他们的造型确实让我感到很沮丧。

较新的浏览器支持视口单元。   caniuse.com/#feat=viewport-units min-height: 100vh

将视口单元视为可视窗口的百分比   （浏览器窗口）。因此，100vh（vh =视口高度）是1080px的100％   100vw是1080p显示器上1920px（vw =视口宽度）的100％。   这可以与普通百分比类似，但是，这只是一个   更直接的方式是绕过内容大小，父/子元素，n   这样。请仔细检查该网站以确保您的用户群正在使用   兼容的浏览器。

http://caniuse.com/#feat=viewport-units

Twitter bootstrap carousel适用于Chrome，但不适用于Firefox，Opera和IE

1 个答案: