Bootstrap Carousel - CSS3 PIE 打破指标循环

Posted 2023-05-08

【中文标题】Bootstrap Carousel - CSS3 PIE 打破指标循环

【英文标题】：Bootstrap Carousel - CSS3 PIE breaks indicators cycling

【发布时间】：2013-07-25 09:52:05

【问题描述】：

所以在很多网站上，我喜欢使用CSS3 PIE 让 IE 7-9 为圆形图像等做边框半径装饰。

对于一个新网站，我在 Twitter Bootstrap 上使用 Carousel 插件，我希望为 IE 用户很好地呈现轮播指示器。

我的轮播工作正常，循环正常等，但是当我将 PIE 行为应用于旧 IE 浏览器的轮播指示器（使用 PIE 的 javascript 版本）时，它会阻止指示器在幻灯片上正确循环。明显的解决方案是删除轮播指示器的 CSS3 PIE（让旧 IE 用户很难看），但理想情况下我想让它工作。

头码sn-p：

<!--[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]-->

正文代码sn-p：

<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" />
                </div>
                <div class="item">
                    <img src="http://twitter.github.io/bootstrap/assets/img/examples/slide-02.jpg" />
                </div>
                <div class="item">
                    <img src="http://twitter.github.io/bootstrap/assets/img/examples/slide-03.jpg" />
                </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>

然后是饼图：

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

我猜问题在于我们有活跃和不活跃指标的方式，并且它们在幻灯片上不断变化......但我不确定如何解决它。

完整代码位于http://www.edwardb.co.uk/test/，您显然需要使用旧版本的 IE。

【问题讨论】：

IE9上不需要PIE做border-radius；它本机支持它。 PIE 仅在 IE9 中需要用于渐变。如果您使用它的只是圆角，则可以将其用于 IE9。如果你决定走这条路，那应该会让你更容易决定放弃旧版本 (IE8) 的 PIE。

很高兴知道，谢谢。使用 IE6 和 IE8 作为我的旧测试虚拟机，所以必须承认我还没有在 IE9 中实际测试过它！不过，IE8 是我的理想目标……因为那是 Win XP 的“最新”IE。

好吧，我仍然倾向于考虑放弃 IE8 的圆角。它肯定不会看起来那么不好？？我喜欢 CSS3Pie 之类的工具，但有时它们不值得，而且它们需要更多的工作，而不仅仅是一个简单的插件。

【参考方案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）。在第一项可见的情况下，“carousel-indicators”的第一个子节点具有“活动”类。

我的解决方案是，要绑定到“滑动”事件，它会在新项目设置为活动状态后触发。该解决方案的唯一问题是，轮播 js 本身也使用“滑动”事件来激活当前指标。因此，我刚刚添加了一个 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;
    
);