twitter-bootstrap - boostrap 2.3.2 轮播 Internet Explorer 图像在过渡时恢复到原始大小

Question

我已经实现了一个带有引导轮播的幻灯片。它在 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%;
}

设置“位置：绝对；...宽度：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>

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%;
}

设置“位置：绝对；...宽度：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>

Answer 3

Henri提供的解决方案提示我找出问题所在，最后我找到了解决方案

css

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

Answer 4

在 IE11 中遇到了同样的问题，但是作为解决方案提出的修复对我不起作用。但是在这个类中添加 width: 100% 对我有用。

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

希望这会帮助任何人。