javascript - Twitter bootstrap carousel 在 Chrome 上运行良好，但在 Firefox、Opera 和 IE 上运行不佳

Question

对于 Chrome 以外的其他浏览器，我在使用 Twitter Bootstrap 轮播时遇到了一个大问题。我到处寻找答案并尝试了所有代码，但似乎没有任何帮助，我希望有人可以帮助我。

在 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，但我尝试更改它们，但一点运气都没有。非常感谢任何帮助!

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

.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%;
}

<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>

Answer 1

如果您希望 height 和 width 确实是页面的百分比，请使用视口(viewport)单位。他们确实让我在造型方面省去了很多挫败感。

Newer browsers support viewport units. caniuse.com/#feat=viewport-units min-height: 100vh

Think of viewport units like a percentage of your viewable window (browser window). So, 100vh (vh = viewport height) is 100% of 1080px and 100vw is 100% of 1920px (vw = viewport width) on a 1080p display. This would work similar to normal percentages, however, this is just a more direct way by bypassing content size, parent/child elements, n such. Do double check that site to make sure your user-base is using compatible browsers.

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