Javascript 引导转盘-CSS3饼图中断指示器循环

所以在很多网站上，我喜欢用IE 7-9做圆角图像的边界半径装饰等等

对于一个新的站点，我正在使用Twitter引导上的旋转木马插件，我希望能够为IE用户很好地呈现旋转木马指示器

我的旋转木马正常工作，正确循环，等等，但当我将PIE行为应用于旧IE浏览器的旋转木马指示器（使用JavaScript版本的PIE）时，它会阻止指示器在幻灯片上正确循环。显而易见的解决方案是删除旋转木马指示器的CSS3饼图（对于旧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>

正文代码段：

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

$（函数（）{
if（窗口派）{
$（'.carousel indicators li'）。每个（函数（）{
附上（这个）；
});
}
});

我猜问题在于我们有活动和非活动的指示器，它们在幻灯片上不断变化。。。但我真的不知道如何修复它

---

完整代码位于，您显然需要使用旧版本的IE。

我也遇到了同样的问题，并找到了解决方案。问题的原因是css3pie添加的css3容器标记：

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

---

在IE9上，你不需要馅饼来做边界半径；它在本地支持它。PIE仅在IE9中用于渐变。如果你只是为了圆角而使用它，你可以把它放到IE9上。如果你决定走这条路，那就更容易决定放弃旧版本（IE8）了。很高兴知道，谢谢。使用IE6和IE8作为我的旧测试VM，所以必须承认我还没有在IE9中实际测试过它！不过，IE8是我的理想目标。。。因为这是Win XP的“最新”IE，所以我还是倾向于考虑为IE8抛出圆角。看起来肯定不会那么糟吧？？我喜欢像CSS3Pie这样的工具，但总有一天它们不值得这么做，而那一天它们比简单的插件需要更多的工作。