bootstrap 2.3.2 carousel internet explorer图像在转换时恢复原始大小

Question

我已经使用bootstrap轮播实现了幻灯片。它在Chrome中运行良好，但在Internet Explorer上运行不正常。

当图像滑出视图时，图像将显示为原始大小一秒钟。当然，当浏览器窗口的大小非常窄时，这会变得非常具有破坏性。

您可以在此处查看：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%;
}

设置“position：absolute; ... width：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

我遇到了同样的问题。适用于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%;
}

设置“position：absolute; ... width：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 3

Henri提供的解决方案促使找出问题，最后我找到了解决方案

CSS

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

Answer 4

IE11中存在同样的问题，但是提出的解决方案对我来说不起作用。但是增加宽度：100％这个类对我来说是个窍门。

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

希望这对任何人都有帮助。