twitter-bootstrap - ブースト トラップ 2.3.2 カルーセル インターネット エクスプローラーの画像が移行時に元のサイズに戻る

Question

ブートストラップ カルーセルを使用してスライドショーを実装しました。Chrome では正常に動作しますが、Internet Explorer では動作しません。

画像がスライドして見えなくなると、画像は元のサイズで 1 秒間表示されます。もちろん、ブラウザー ウィンドウのサイズが非常に狭い場合、これは非常に混乱を招きます。

ここで見ることができます：http ://websonalized.com/citec/

カルーセルには、html コードがあります。

<div id="frontpagecarousel" class="carousel slide">
    <div class="carousel-inner">
        <div class="item active">
            <img src="images/computer-lab.png" alt="Informática Administrativa" title="Informática Administrativa" />
            <div class="module dark large hidden-phone">
                <div class="heading">
                    Informática Administrativa
                </div>
                <div class="bodytext">
                    Aprende los programas y aplicaciones más usuales en actividades administrativas y educativas
                </div>
                <a class="btn" href="#">
                    Más Información
                </a>
            </div>
            <a class="btn btn-inverse btn-large visible-medium" href="#">
                Cursos de Informática Administrativa 
                <span class="block">Más Información</span>
            </a> 
            <a class="btn btn-inverse btn-large visible-small" href="#">
                Informática Administrativa
            </a>
        </div>

        <div class="item">
            <img src="images/curso-prepa-abierta.png" alt="Preparatoria Abierta" title="Preparatoria Abierta" />
            <div class="module dark large hidden-phone">
                <div class="heading">
                    Preparatoria Abierta
                </div>
                <div class="bodytext">
                    Termina tu bachillerato en 3 semestres o menos, y recibe tu certificado expedido por las SEP
                </div>
                <a class="btn" href="#">
                    Más Información
                </a>
            </div>
            <a class="btn btn-danger btn-large visible-medium" href="#">
                Clases Reales de Preparatoria Abierta 
                <span class="block">Más Información</span>
            </a> 
            <a class="btn btn-danger btn-large visible-small" href="#">
                Preparatoria Abierta
            </a>
        </div>

        <div class="item">
            <img src="images/informatica-contable.png" alt="Informática Contable" title="Informática Contable" />
            <div class="module dark large hidden-phone">
                <div class="heading">
                    Informática Contable
                </div>
                <div class="bodytext">
                    Destaca en funciones contables y fiscales: nomina, SUA, polizas, activo-pasivo-capital, impuestos, etc.
                </div>
                <a class="btn" href="#">
                    Más Información
                </a>
            </div>
            <a class="btn btn-warning btn-large visible-medium" href="#">
                Cursos de Informática Contable 
                <span class="block">Más Información</span></a> 
                <a class="btn btn-warning btn-large visible-small" href="#">
                    Informática Contable
                </a>
        </div>

        <div class="item">
            <img src="images/diseno-publicitario.png" alt="" />
            <div class="module dark large hidden-phone">
                <div class="heading">
                    Diseño Publicitario
                </div>
                <div class="bodytext">
                    Nosotros te ayudamos a darle vuelo a tu imaginación y te ensenamos a crear volantes, tarjetas de presentación, invitaciones, calendarios, y más
                </div>
                <a class="btn" href="#">
                    Más Información
                </a>
            </div>
            <a class="btn btn-success btn-large visible-medium" href="#">
                Aprende Diseño Publicitario 
                <span class="block">Más Información</span>
            </a> 
            <a class="btn btn-success btn-large visible-small" href="#">
                Diseño Publicitario
            </a>
        </div>

        <div class="item">
            <img src="images/ingles-conversar.png" alt="Inglés Conversacional" title="Inglés Conversacional" />
            <div class="module dark large hidden-phone">
                <div class="heading">
                    Inglés Conversacional
                </div>
                <div class="bodytext">
                    Aprende inglés en 3 cuatrimestres con nuestro nuevo método que es fácil y efectivo
                </div>
                <a class="btn" href="#">
                    Más Información
                </a>
            </div>
            <a class="btn btn-primary btn-large visible-medium" href="#">
                Curso Inovador y Efectivo de Inglés Conversacional <span class="block">Más Información</span>
            </a> 
            <a class="btn btn-primary btn-large visible-small" href="#">
                Inglés Conversacional
            </a>
        </div>

    </div>
</div>
<p>
    <a id="leftarrow" class="carousel-control left" href="#frontpagecarousel" data-slide="prev">
        ‹
    </a> 
    <a id="rightarrow" class="carousel-control right" href="#frontpagecarousel" data-slide="next">
        ›
    </a>
</p>

カルーセルを初期化するには、javascript:

$('#frontpagecarousel').carousel({ interval: 4000, cycle: true });

カルーセルのコンテナに適用される唯一のスタイリング

.showcase {
  position: relative;
}
.carousel-inner > .item {
  max-height: 532px;
}
.showcase div.module.dark {
  position: absolute;
  top: 40%;
  left: 13%;
  float: left;
  border: solid 3px #ffffff;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  background-color: #414140;
  -webkit-box-shadow: inset 0 0 54px rgba(33, 33, 32, 0.93);
  -moz-box-shadow: inset 0 0 54px rgba(33, 33, 32, 0.93);
  box-shadow: inset 0 0 54px rgba(33, 33, 32, 0.93);
  color: #ffffff;
  padding: 2%;
}

Internet Explorer の中断を修正する方法を理解するのを手伝ってくれる人はいますか?

Answer 1

同じ問題が発生しています。Chrome では正常に動作しますが、IE10 では動作しません。

移行中、スライド アイテムは次のように変化します。

<div class="item active">...</div>
<div class="item">...</div>
<div class="item">...</div>

これに：

<div class="item active left">...</div>
<div class="item next left">...</div>
<div class="item">...</div>

対応する bootstrap.css は次のとおりです。

.carousel-inner > .item > img, .carousel-inner > .item > a > img {
display: block;
line-height: 1;
}
.carousel-inner > .active, .carousel-inner > .next, .carousel-inner > .prev {
    display: block;
}
.carousel-inner > .active {
    left: 0;
}
.carousel-inner > .next, .carousel-inner > .prev {
    position: absolute;
    top: 0;
    width: 100%;
}
.carousel-inner > .next {
    left: 100%;
}
.carousel-inner > .prev {
    left: -100%;
}
.carousel-inner > .next.left, .carousel-inner > .prev.right {
    left: 0;
}
.carousel-inner > .active.left {
    left: -100%;
}
.carousel-inner > .active.right {
    left: 100%;
}

「位置：絶対; ...幅：100％」を設定すると、IEで問題が発生します。.next クラスがアイテムに割り当てられている間、画像はその高さと幅全体 (100%) でレンダリングされます。トランジションと .next クラスが削除された後、画像は相対的な位置とスケーリングされた値に戻ります。

動作をオーバーライドする方法を見つけましたが、完全ではありません。最初のトランジションでの動作はまだ確認できますが、その後は問題ありません。

スライド イベントで、.next .item の幅を .active と同じに設定し、スライド イベントで、現在の .active .item を 100% に戻しました。

<script type='text/javascript'>
$(document).ready(function() {
    $('.carousel').carousel({
        interval: 5000
    }).on('slide', function (event) {
        $(event.relatedTarget).width($(this).find('.active').width());
    }).on('slid', function (event) {
        $(this).find('.active').width('100%');
    });
});
</script>

Answer 2

Henri によって提供された解決策は、問題を解決するように促し、最終的に解決策を見つけました。

CSS

.carousel.slide, .carousel.slide > div { width: 100%; }

Answer 3

IE11でも同じ問題がありましたが、解決策として提案された修正はうまくいきませんでした。しかし、このクラスに width: 100% を追加するとうまくいきました。

.carousel-inner > .active.left {
  left: -100%;
  width: 100%;
}
.carousel-inner > .active.right {
  left: 100%;
  width: 100%;
}

これが誰にも役立つことを願っています。