1

所以在很多网站上，我喜欢使用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>

然后是馅饼：

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

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

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

4

1 回答 1

2

我遇到了同样的问题，并找到了解决方案。问题的原因是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;
    }
});
于 2013-11-14T17:03:35.577 回答