bxSlider 在 IE8 中不工作，除非开发者工具被激活答案

【问题标题】：bxSlider not working in IE8, unless developer tools activatedbxSlider 在 IE8 中不工作，除非开发者工具被激活
【发布时间】：2013-10-22 14:51:44
【问题描述】：

我正在尝试使用 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 正在折叠 bxSlider 中的 LI，并建议添加一些 CSS 来为 LI 提供宽度。这对我也不起作用。

所以现在几个小时后我在这个问题上完全无处可去。有什么建议吗，医生？

【问题讨论】：

标签： jquery jquery-mobile internet-explorer-8 bxslider

【解决方案1】：

有趣的是，我今晚遇到了同样的问题 - 在我的场景中，我能够在 bx-wrapper 上设置一个固定的高度，所以......

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

为我修复了它 - 不理想，因为我希望它很灵活，但它在这里工作。

我尝试调试脚本并将其缩小到 resizeWindow->redrawSlider 处理程序是导致显示正确的原因（不是特别是开发人员工具，而是打开它们时发生的调整窗口大小事件） - 超出时间，但如果我明天有更好的解决方案会告诉你。

【讨论】：

谢谢@Migo。真高兴你做到了。不幸的是，我需要这个灵活。不过，这是很好的信息......我永远不会想到这一点，因为我正在使用虚拟机运行 IE8，而且我无法调整窗口大小。这绝对给了我一些尝试的想法。如果我也找到灵活的解决方案，我会告诉你的。干杯，再次感谢！
嘿@MigoFast，我发现离开页面并再次返回也会导致滑块出现。这是否提供了任何进一步的线索？

【解决方案2】：

我有同样的问题。对我来说，解决方案不是按百分比调整滑动图像的大小，而是按像素的确切数量。例如，

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

代替

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

然后通过添加引导程序的 img-responsive 类使图像再次响应。

【讨论】：

嘿，谢谢@user2609980。很高兴你在这里回复，因为我还没有解决这个问题。我正在使用 JQM，我希望有一个 img-responsive 类。但是，除非 Bootstrap 中有一些后门程序是完成这项工作所必需的，否则我应该只做一个。看起来它所做的只是应用width:100%; 和height:auto;。我会试一试，让你看看它是怎么回事......虽然这可能需要我一点时间，因为我的 css3mediaqueries.js 在某个时候停止工作，这一切都没有实际意义。
@MattKristiansen 我现在看到我可能一直在回答另一个问题:)。我遇到的问题是高度在 IE8 中没有以正确的方式呈现（它被拉伸了），但它确实在 FireFox 中以良好的高度呈现。上面的答案解决了这个问题。
如果您说它在调试时确实有效，那么毕竟在某处可能有console.log。你不需要用它来破坏 IE。
是的，@user2609980，这不是我的问题。感谢您的其他建议。我在脚本中搜索了 console.log，但没有任何结果，你认为这足以解决这个问题吗？
删除 console.log 为我解决了这个问题。感谢您提供信息。

【解决方案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>

【讨论】：

【解决方案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();
    }
}

【讨论】：