Question

因此，在许多网站上，我喜欢使用CSS3 PIE来使IE 7-9为圆形图像等进行边框半径装饰。

对于一个新网站，我在Twitter Bootstrap上使用Carousel插件，我想让IE用户很好地呈现旋转木马指示器。

我的旋转木马工作正常，正确循环等等，但是当我将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）。在第一个项目可见的情况下，“轮播指示符”的第一个子节点具有“活动”类。

我的解决方案是，要绑定到“滑动”事件，它会在新项目设置为活动后触发。此解决方案的唯一问题是，轮播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;
    }
});

Bootstrap Carousel - CSS3 PIE打破指标循环

1 个答案: