bxSlider не работает в IE8, если не активированы инструменты разработчика

Я пытаюсь использовать bxSlider, и IE8, похоже, не будет сотрудничать. В этом примере ползунок изображения либо свернут, либо вообще не отображается... трудно сказать, потому что, когда я включаю инструменты разработчика для отладки, ползунок внезапно появляется, и все кажется крутым.

http://www.ilium.com/test/

Был еще один подобный вопрос, в котором была ошибка javascript (в другом плагине слайд-шоу), которая была устранена путем включения консоли отладки:

скрипт jQuery работает только с инструментами разработчика ie8/9

... но IE, похоже, не выдает никаких ошибок в моем случае, и предложенные исправления не сработали/не применимы к моей ситуации. Кроме того, я не думаю, что в моих сценариях есть console.log. Я пытался добавить любое количество скриптов, которые активируют консоль при загрузке страницы, но безрезультатно.

Я попробовал исправление, направленное на разрешение конфликтов JQuery (предложенное на другом сайте, на который у меня еще нет достаточной репутации для ссылки), изменив вызов функции bxSlider следующим образом:

    <script>// <![CDATA[
    $jQ = jQuery.noConflict();
    $jQ('#home').live('pageshow',function(){
    $jQ('.bxslider').bxSlider({
    mode: 'fade',
    auto: true,
    pager: false,
    controls:true,
    pause: 9000,
    });
    });
    // ]]>
    </script>

Ничего хорошего, и начал вызывать целые другие конфликты.

В выпуске на GitHub (https://github.com/wandoledzep/bxslider-4/issues/197), было заявлено, что IE сворачивает LI в bxSlider, и было предложено добавить немного CSS, чтобы придать LI ширину. Это также не сработало для меня.

Так что щас я ровно нигде по этому вопросу спустя несколько часов. Есть предложения, доктора?


jquery jquery-mobile internet-explorer-8 bxslider
person Halfacre    schedule 14.10.2013    source источник

Ответы (4)


arrow_upward
0
arrow_downward

Забавно, что сегодня вечером я столкнулся с той же проблемой - в моем сценарии я смог установить фиксированную высоту для bx-обертки, поэтому....

.bx-wrapper{
   height: 500px !important;
}

исправил это для меня - не идеально, потому что я ожидаю, что он будет гибким, но здесь это сработало.

Я попытался отладить сценарий и сузил его до обработчика resizeWindow->redrawSlider, который заставляет отображение выравниваться (не конкретно инструменты разработчика, а событие изменения размера окна, которое происходит при их открытии) - не вовремя, но если У меня есть лучшее решение, завтра сообщу.

person maehue    schedule 15.10.2013
comment
Спасибо @Миго. Рад, что у тебя получилось. К сожалению, мне понадобится это, чтобы быть гибким. Тем не менее, это хорошая информация... Я бы никогда не понял этого, потому что я использую виртуальную машину для запуска IE8 и не могу изменить размер окна. Это определенно дает мне некоторые идеи, чтобы попробовать. Я также дам вам знать, если найду гибкое решение. Здоровья и еще раз спасибо! - person Halfacre; 15.10.2013
comment
Привет, @MigoFast, я обнаружил, что переход со страницы и обратно также приводит к появлению ползунка. Дает ли это дополнительные подсказки? - person Halfacre; 17.10.2013

arrow_upward
0
arrow_downward

Я была такая же проблема. Для меня решение заключалось не в изменении размера скользящих изображений в процентах, а в точном количестве пикселей. Например.,

<li><img src="image.jpg" style="width: 561px; height: 425px;" /></li>

Вместо

<li><img src="image.jpg" style="width: 170%; height: 170%;" /></li>

а затем снова сделать изображение отзывчивым, добавив класс начальной загрузки img-responsive.

person Erwin Rooijakkers    schedule 22.01.2014
comment
Привет, спасибо @user2609980. Рад, что вы ответили здесь, потому что я до сих пор не разобрался с этой проблемой. Я использую JQM, и, черт возьми, я бы хотел, чтобы был класс img-responsive. Но если в Bootstrap нет каких-то бэкдоров, которые необходимы для того, чтобы это работало, я должен просто накрутить один из них. Похоже, все, что он делает, это применяет width:100%; и height:auto;. Я попробую и расскажу вам, как все идет ... хотя это может занять у меня немного времени, потому что мой css3mediaqueries.js в какой-то момент перестал работать, что делает все это спорным. - person Halfacre; 22.01.2014
comment
@MattKristiansen Теперь я вижу, что, возможно, отвечал на другой вопрос :). У меня была проблема, что высота отображалась неправильно в IE8 (она была растянута), но она отображалась на хорошей высоте в FireFox. Это было решено с ответом выше. - person Erwin Rooijakkers; 22.01.2014
comment
Если вы говорите, что это работает во время отладки, в конце концов, где-то может быть console.log. Вам не нужно использовать его, чтобы IE сломался. - person Erwin Rooijakkers; 22.01.2014
comment
Да, @user2609980, это не совсем моя проблема. Однако спасибо за другое предложение. Я искал в своих сценариях console.log безрезультатно, как вы думаете, этого достаточно, чтобы положить этому конец? - person Halfacre; 23.01.2014
comment
Удаление console.log решило эту проблему для меня. Спасибо за информацию. - person The Jonas Persson; 04.03.2014

arrow_upward
0
arrow_downward

У меня была такая же проблема с сайтом, что я сделал, чтобы исправить это, вместо изменения размера браузера (что также сработало для меня; это то, что, по сути, делает открытие инструментов разработчика), я добавил немного кода для перезагрузки изображений (не из кеша) каждый раз в IE8, добавляя произвольный запрос в конец каждого изображения. Это, казалось, сработало для меня. Увидеть ниже.

<div class="slide"><img src="images/your_image_name.jpg<?php if (strstr($_SERVER['HTTP_USER_AGENT'], "MSIE 8") > ""){ echo "?v=" .  time(); } ?>" ></div>
person mbacklas    schedule 14.04.2014

arrow_upward
0
arrow_downward

Это ОЧЕНЬ хакерский подход, но я обнаружил, что он работает в IE8. По сути, он запускает изменение размера окна, заставляя ползунок BX перезагружаться.

Поместите это внутрь тега загрузки окна.

if ($('.bxslider').length > 0) {

    slider = $('.bxslider').show().bxSlider();
    slider.reloadSlider();

}

function fireOnResizeEvent() {
 var width, height;

 if (navigator.appName.indexOf("Microsoft") != -1) {
  width  = document.body.offsetWidth;
  height = document.body.offsetHeight;
 } else {
  width  = window.outerWidth;
  height = window.outerHeight;
 }

 window.resizeTo(width - 1, height);
 window.resizeTo(width + 1, height);
}

window.onresize = function() {
    if ($('.bxslider').length > 0) {
        slider.reloadSlider();
    }
}
person Ash Whiting    schedule 12.11.2015