boostrap 2.3.2 carousel internet explorer изображения назад к исходному размеру при переходе

Я реализовал слайд-шоу с карусельной загрузкой. Он отлично работает в Chrome, но не в Internet Explorer.boostrap 2.3.2 carousel 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%; 
}

Может ли кто-нибудь помочь мне разобраться, как исправить нарушение интернет-браузера?

источник

2013-08-02 IberoMedia

Решение, предложенное Генрихом предложено выяснить проблемы, и, наконец, я нашел решение

CSS

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

источник

2013-08-23 03:13:46 IberoMedia

У меня такая же проблема. Прекрасно работает в 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, чтобы она была такой же, как и активная, и на слайд-событии я установил текущее .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>

источник

2013-08-08 17:07:18

У меня такая же проблема. Прекрасно работает в 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 будут удалены, изображение вернется к его относительному позиционированию и масштабированным значениям.

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

источник

2013-08-10 00:19:35

спасибо, но я сожалею; ваш ответ не является решением; один, потому что вы получаете ошибку при выходе, даже если только один раз; и, во-вторых, b/c, выполнив настройку css, мы можем исправить эту проблему. Еще раз спасибо – IberoMedia

была такая же проблема в IE11, однако исправить предложенный в качестве решения не работал для меня. Но добавление ширины: 100% для этого класса сделали трюк для меня.

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

Надеюсь, это поможет кому угодно.

источник

2014-02-27 23:25:27 tobjak75

boostrap 2.3.2 carousel internet explorer изображения назад к исходному размеру при переходе

ответ

Смежные вопросы