1

js 和 jquery newb 在这里，我在http://www.irvins.com:8080的主页上的幻灯片有问题- 我已经在 IE10/Firefox/Webkit 中工作，但 IE8 和 IE9 仍然会赢不喜欢我的剧本。IE8 不会显示初始幻灯片，也不会设置动画（因此您只会得到一个空白区域，其中各种幻灯片都标记为“显示：无”。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 的所有幻灯片都显示为“显示：无；”）：

<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 显示任何内容的问题，我认为这一定是我的“directives.js”代码的另一部分?

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

/**
 * 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]-->
4

1 回答 1

1

您的代码包括console.log(elm);. 这将适用于 Firefox 和 Chrome，因为这些浏览器已经很好地定义了该console变量。但是，在 IE 中有一些怪癖（说得好），您的脚本可能会在该行引发错误，并且不会在 IE8/9 中继续。查看this question for using it in IE8，以及this question for IE9。

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

于 2013-04-26T13:55:24.467 回答