这里是 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&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&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&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&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的代码？
在我的 slider 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 class...”，见下文:
<!--[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 中继续。看this question用于在 IE8 中使用它，以及 this question适用于 IE9。
当您准备好“上线”该网站时，最好也删除所有控制台日志记录。
关于javascript - IE8/9 幻灯片放映可见性问题..？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16238073/