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

js和jquery newb在这里，我在http://www.irvins.com:8080的主页上有一个幻灯片问题-我已经在IE10/Firefox/Webkit中工作了，但IE8和IE9仍然不会与我的脚本一起玩球。IE8不会显示初始幻灯片，也不会动画(所以你只会得到一个空白的空间，各种幻灯片都标记为"显示:无")。IE9选择了第一张幻灯片，但同样没有动画。这里的脚本我使用jquery 1.8.1(分钟)和以下脚本:

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]-->

您的代码包括console.log(elm);。这将在Firefox和Chrome中工作，因为这些浏览器已经很好地定义了console变量。然而，它在IE中有一些怪癖(说得好听点)，你的脚本可能会在那一行抛出一个错误，而在IE8/9中不会继续。看看在IE8中使用它的问题，以及在IE9中使用它的问题。

相关内容

最新更新

热门标签：