Question

js和jquery newb在这里，我在http://www.irvins.com:8080主页上的幻灯片显示有问题 - 我已经在IE10 / Firefox / Webkit中工作但是IE8和IE9仍然无法播放球用我的脚本。 IE8不会显示初始幻灯片，也不会设置动画（所以你只得到一个空白区域，各种幻灯片都标记为“display：none”。IE9拿起第一张幻灯片但又没有动画。这是脚本我正在使用jquery 1.8.1（min）和以下脚本：

components.directive('uiSlideshow', function () {
    return {
        restrict: 'EAC',
        link: function(scope, elm, attr, ctrl) {
            console.log(elm);
            elm.children('.slide').first().addClass('active');
            setInterval(function() { 
                elm.children('.slide')
                    .first()
                    .fadeOut(1000)
                    .next()
                    .fadeIn(1000)
                    .end()
                    .appendTo(elm);
            },  5000);
        }
    }
});

幻灯片（来自Chrome - IE8的所有幻灯片均为“display：none;”）：

<section class="feature ui-slideshow"> 
    <figure class="slide" style="display: block;">
        <a href="/search_results.asp?category=25&amp;top_category_id=25">
            <img src="public/images/ss-lighting-0213.jpg" alt="Country Style Lighting" border="0">
        </a>
    </figure>
    <figure class="slide" style="display: none;">
        <a href="/search_results.asp?category=70&amp;top_category_id=70">
            <img src="public/images/ss-tinware-0213.jpg" alt="Tinware" border="0">
        </a>
    </figure>
    <figure class="slide" style="display: none;">
        <a href="/search_results.asp?category=55&amp;top_category_id=55">
            <img src="public/images/ss-furniture-0213.jpg" alt="Upholstered Furniture" border="0">
        </a>
    </figure>
    <figure class="slide active" style="display: none;">
        <a href="/search_results.asp?category=60&amp;top_category_id=60">
            <img src="public/images/ss-bedding-0213.jpg" alt="Milsboro Quilted Bedding" border="0">
        </a>
    </figure>
</section>

我忽略了一些明显的东西？我正在使用旧IE的某些特定内容无法理解？

-----------------------更新-------------------- ---

感谢ajp15243建议的IE9修复

我现在意识到我有两个完全不同的问题，一个控制台变量问题（已解决，请参阅下面的评论）以及阻止IE8显示任何内容的其他内容，我认为这必须是我的另一部分'指令。 js'代码？

IE9幻灯片现在在我的js文件开头为滑块添加以下内容后动画：

/**
 * Protect window.console method calls, e.g. console is not defined on IE
 * unless dev tools are open, and IE doesn't define console.debug
 */
(function() {
  if (!window.console) {
    window.console = {};
  }
  // union of Chrome, FF, IE, and Safari console methods
  var m = [
    "log", "info", "warn", "error", "debug", "trace", "dir", "group",
    "groupCollapsed", "groupEnd", "time", "timeEnd", "profile", "profileEnd",
    "dirxml", "assert", "count", "markTimeline", "timeStamp", "clear"
  ];
  // define undefined methods as noops to prevent errors
  for (var i = 0; i < m.length; i++) {
    if (!window.console[m[i]]) {
      window.console[m[i]] = function() {};
    }    
  } 
})();

-----------------------更新2 ------------------- ----

问题解决了！

第二个问题与angular.js有关，它需要改变我用于“html类......”的内容，见下文：

<!--[if IE 8 ]><html lang="en" class="ng-app:Irvins" id="ng-app" ng-app="Irvins" xmlns:ng="http://angularjs.org"> <![endif]-->

Answer 1

您的代码包含console.log(elm);。这适用于Firefox和Chrome，因为这些浏览器已经很好地定义了console变量。但是，在IE中有一些怪癖（很好地说），你的脚本可能会在该行上抛出错误，而不是在IE8 / 9中继续。查看this question是否在IE8中使用它，this question用于IE9。

当您准备好对网站“上线”时，理想情况下也应该删除所有控制台日志记录。

IE8 / 9幻灯片显示可见性问题..？

1 个答案: