Twitter引導輪播與Chrome兼容，但不能在Firefox，Opera和IE上使用

Question

對於Chrome以外的其他瀏覽器，twitter引導輪播會出現嚴重問題。 我到處尋找答案並嘗試了所有代碼，但似乎沒有幫助，我希望有人可以在這里幫助我。

在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確實是頁面的百分比，請使用視口單位。 他們無疑使我免於樣式的困擾。

較新的瀏覽器支持視口單位。 caniuse.com/#feat=viewport-units min-height: 100vh

將視口單位想像成可見窗口（瀏覽器窗口）的百分比。 因此，在1080p顯示器上，100vh（vh =視口高度）是1080px的100％，而100vw是1920px（vw =視口寬度）的100％。 這將與正常百分比相似，但是，這只是繞過內容大小，父/子元素等更直接的方法。 仔細檢查該站點，以確保您的用戶群正在使用兼容的瀏覽器。

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