Bootstrap Carousel-CSS3 PIE中斷指示器循環

Question

因此，在許多站點上，我喜歡使用CSS3 PIE使IE 7-9對圓形圖像等進行邊框半徑裝飾。

對於一個新站點，我正在Twitter Bootstrap上使用Carousel插件，並且我希望為IE用戶很好地呈現Carousel指示器。

我的輪播正常運行，可以正確循環顯示，但是當我將PIE行為應用於舊IE瀏覽器的輪播指示器（使用PIE的JavaScript版本）時，它會停止指示器在幻燈片上正確循環。 顯而易見的解決方案是刪除輪播指示器的CSS3 PIE（對於舊IE的用戶而言，它們很難看），但是理想情況下，我希望它能夠正常工作。

標題代碼段：

<!--[if (IE 7)|(IE 8)]>
    <script type="text/javascript" src="//cdn.jsdelivr.net/css3pie/2.0b1/PIE_IE678.js"></script>
<![endif]-->
<!--[if IE 9]>
    <script type="text/javascript" src="//cdn.jsdelivr.net/css3pie/2.0b1/PIE_IE9.js"></script>
<![endif]-->

身體代碼段：

<div id="myCarousel" class="carousel slide">
            <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="item active">
                    <img src="http://twitter.github.io/bootstrap/assets/img/examples/slide-01.jpg" alt=""/>
                </div>
                <div class="item">
                    <img src="http://twitter.github.io/bootstrap/assets/img/examples/slide-02.jpg" alt=""/>
                </div>
                <div class="item">
                    <img src="http://twitter.github.io/bootstrap/assets/img/examples/slide-03.jpg" alt=""/>
                </div>
            </div>
            <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>

然后是PIE：

<script type="text/javascript">
        $(function() {
            if (window.PIE) {
                $('.carousel-indicators li').each(function() {
                    PIE.attach(this);
                });
            }
        });
</script>

我猜問題出在我們擁有活動和不活動指示器的方式上，並且它們不斷變化……但是我不確定如何解決它。

完整代碼在http://www.edwardb.co.uk/test/上 ，您顯然需要使用IE的舊版本。

Answer 1

我遇到了同樣的問題，並找到了解決方案。 問題的原因是css3pie添加的css3-container標簽：

<ol class="carousel-indicators">
    <css3-container ...>...</css3-container>
    <li>...</li>
    <css3-container ...>...</css3-container>
    <li>...</li>
    ...
</ol>

當活動的滑塊項目更改時，輪播js會激活第n個輪播指示器（包括css3-container-tags）。 在第一個項目可見的情況下，“輪播指示器”的第一個子節點具有“活動”類。

我的解決方案是，綁定到“ slid”事件，在將新項目設置為活動狀態后將其觸發。 該解決方案的唯一問題是輪播js本身也使用“ slid”事件來激活當前指示器。 因此，我剛剛添加了setTimeout調用，如果還有其他可能，請告訴我。

$('.carousel').on('slid', function(e) {
    if($('html').is('.lt-ie9')) {
        var carousel = $(this);
        var items = $('.carousel-inner .item', carousel);
        var indicators = $('.carousel-indicators', carousel).children();
        if (items.length !== indicators.length) {
            setTimeout(function() {
                var active_index = items.filter('.active').index();
                indicators.removeClass('active');
                $(indicators.filter('li').get(active_index)).addClass('active');
            }, 250);
        }
        return false;
    }
});