Twitter bootstrap boostrap 2.3.2在过渡时将internet explorer图像旋转回原始大小

我用引导旋转木马实现了一个幻灯片放映。它可以在Chrome上正常工作，但不能在Internet Explorer上正常工作

当图像滑出视图时，图像会以原始大小显示一秒钟。当然，当浏览器窗口的大小非常窄时，这会造成很大的破坏

您可以在这里查看：

对于旋转木马，我有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>

应用于旋转木马容器的唯一样式

.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中断的问题吗？

我也遇到了同样的问题。在Chrome中可以正常工作，但在IE10中不行

在转换过程中，幻灯片项目会发生以下变化：

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

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

设置“position:absolute；…width:100%”会导致IE中出现问题。当为项目指定.next类时，图像将以其全高和全宽（100%）进行渲染。在转换和.next类被删除后，图像返回到其相对位置和缩放值

我已经找到了一种方法来克服这种行为，但它并不完美。我仍然可以看到第一次转换时的行为，但之后就没事了

在幻灯片事件中，我将.next.item的宽度设置为与.active相同，在幻灯片事件中，我将now.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>

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

$（文档）.ready（函数（）{
$（'.carousel'）。carousel({
间隔时间：5000
}).on（'幻灯片'，功能（事件）{
$（event.relatedTarget）.width（$（this.find（'.active'）.width（））；
}).on（'slided'，函数（事件）{
$（this.find（'.active'）.width（'100%）；
});
});

我遇到了同样的问题。在Chrome中可以正常工作，但在IE10中不行

在转换过程中，幻灯片项目会发生以下变化：

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

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

设置“position:absolute；…width:100%”会导致IE中出现问题。当为项目指定.next类时，图像将以其全高和全宽（100%）进行渲染。在转换和.next类被删除后，图像返回到其相对位置和缩放值

我已经找到了一种方法来克服这种行为，但它并不完美。我仍然可以看到第一次转换时的行为，但之后就没事了

在幻灯片事件中，我将.next.item的宽度设置为与.active相同，在幻灯片事件中，我将now.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>

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

$（文档）.ready（函数（）{
$（'.carousel'）。carousel({
间隔时间：5000
}).on（'幻灯片'，功能（事件）{
$（event.relatedTarget）.width（$（this.find（'.active'）.width（））；
}).on（'slided'，函数（事件）{
$（this.find（'.active'）.width（'100%）；
});
});

亨利提供的解决方案促使我解决了这个问题，最后我找到了解决方案

css

---

在IE11中也有同样的问题，但是作为解决方案提出的修复方案对我不起作用。但是增加宽度：100%的宽度对我来说是个好办法

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

---

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

谢谢，但我很抱歉；你的回答不是解决办法；一是因为你一开始就犯了错误，即使只有一次；第二，b/c通过css调整，我们可以解决这个问题。再次感谢你

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

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