1

そのため、多くのサイトでCSS3 PIEを使用して、IE 7-9 で丸みを帯びた画像などの境界半径の装飾を行うのが好きです。

新しいサイトでは、Twitter Bootstrap のカルーセル プラグインを使用しています。カルーセル インジケーターを IE ユーザー向けに適切にレンダリングしたいと考えています。

私のカルーセルは正常に動作し、正しく循環しますが、PIE 動作を古い IE ブラウザーのカルーセル インジケーターに適用すると (JavaScript バージョンの PIE を使用)、インジケーターがスライド上で正しく循環しなくなります。明らかな解決策は、カルーセル インジケーターの 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