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

Question

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

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

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

jQuery script only working under ie8/9 developer tools

... но 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 ширину. Это также не сработало для меня.

Так что прямо сейчас я не в этом вопросе через несколько часов. Любые предложения, врачи?

Answer 1

Забавный я побежал в том же номере вечером - в моем случае я был в состоянии установить фиксированную высоту на BX-обертку так ....

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

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

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

Answer 2

У меня была та же проблема. Для меня решение не изменяло размер скользящих изображений в процентах, а точным количеством пикселей. НАПРИМЕР,

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

Вместо

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

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

Answer 3

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

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

Answer 4

Это очень Hacky подход, но я обнаружил, что он работал в 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(); 
    } 
}