Flexslider 适用于除 IE 10 之外的所有应用答案

【问题标题】：Flexslider works in everything but IE 10Flexslider 适用于除 IE 10 之外的所有应用
【发布时间】：2015-12-12 15:54:13
【问题描述】：

Flexslider 适用于除 IE 10 之外的所有实例。网站是 www.nybreeder.com

有人可以直接指出编码中的问题吗？

不确定它是否是版本错误以及如何更正，或者它只是一个需要完成的悬挂代码行..我的眼睛开始受伤了。

谢谢

<!DOCTYPE html>
<html lang="en">
<head>
<title>Westchester NY Puppies for Sale </title>
<meta charset="utf-8" />
<meta name="description" content="We offer the finest selection of purebred and        designer puppies in Westchester NY." />
<meta name="publisher" href="https://plus.google.com/104126152754968851553" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" media="screen" />
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/superfish.js"></script>
<script src="js/jquery.responsivemenu.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/cufon-yui.js"></script>
<script src="js/KleinSlabserif-Light_300.font.js"></script>
<script src="js/cufon-replace.js"></script>
<script src="js/jquery.equalheights-rt.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.ui.totop.js"></script>
<script src="js/script.js"></script>
<script>
    $(function(){
            if (($.browser.msie) && ($.browser.version < '9.0')) {
        $('.flexslider').flexslider({
            animation: "slide",
            slideshow: true,
            slideshowSpeed: 7000,
            animationDuration: 600,
            prevText: "Previous",
            nextText: "Next",
            controlNav: true,
        })   } else {
        $('.flexslider').flexslider({
            animation: "fade",
            slideshow: true,
            slideshowSpeed: 7000,
            animationDuration: 600,
            prevText: "Previous",
            nextText: "Next",
            controlNav: true,
        });  } 
    })
</script>

【问题讨论】：

您是否检查了浏览器的控制台以查看它是否抛出任何错误？
不知道你的意思，我几乎不使用 IE 10 抱歉，我使用 chrome 开发工具，如果我在 IE 9 中查看该网站工作正常，它只是 IE10
是的，IE 10（以及 IE 9 和 8）应该具有相同的功能 - 称为开发人员工具的功能（按 F12 打开）。您应该查看“控制台”以查看是否抛出任何错误。
HTML1508：结束标记不匹配。 index.html，第 103 行字符 6 HTML1514：找到额外的“”标签。每个文档只能存在一个“”标签。 index.html，第 225 行字符 39 HTML1423：格式错误的开始标记。属性应该用空格分隔。 index.html，第 319 行字符 72 HTML1409：属性名称字符无效。属性名称不应包含 (")、(')、(
那些是抛出的代码，似乎没有什么会影响为什么滑块在除 10 之外的所有东西中都可以工作

标签： javascript html internet-explorer internet-explorer-10

【解决方案1】：

看起来“9.0”不应该用引号引起来，应该是 10？

$(function(){
    if (($.browser.msie) && ($.browser.version < 10)) {
        $('.flexslider').flexslider({
            animation: "slide",
            slideshow: true,
            slideshowSpeed: 7000,
            animationDuration: 600,
            prevText: "Previous",
            nextText: "Next",
            controlNav: true,
        });   
    } else {
        $('.flexslider').flexslider({
            animation: "fade",
            slideshow: true,
            slideshowSpeed: 7000,
            animationDuration: 600,
            prevText: "Previous",
            nextText: "Next",
            controlNav: true,
        });  
    }
});

【讨论】：

【解决方案2】：

这是我在这个论坛上的第一篇文章....我也遇到了类似的问题...从以下链接得到答案....

https://github.com/woothemes/FlexSlider/issues/413

以下是来自Github的总结...

我修复它添加这个 slider.container.css("过渡持续时间", dur); 以下 slider.container.css("-" + slider.pfx + "-transition-duration", dur); //第616行并添加这个 slider.container.css('transform',target); 以下 slider.container.css(slider.args); //第622行

添加代码后，它可能会给您在 chrome 中带来麻烦...以下是我在所有浏览器中工作的解决方案...

//第 609-614 行

               var isChrome = window.chrome;

    if(isChrome) {

    slider.container.css("-" + slider.pfx + "-transition-duration", dur);

    }else{

    slider.container.css("transition-duration", dur);

    }

//第 619-624 行

     var isChrome = window.chrome;

  if(isChrome) {

  if (slider.transitions || dur === undefined) slider.container.css(slider.args);

  }else{

  if (slider.transitions || dur === undefined) slider.container.css('transform',target);

  }

希望对你有帮助！！！

【讨论】：

【解决方案3】：

如果有人尝试调试 IE 11，它会将自己标识为 mozilla：

if ( ($.browser.mozilla) && (Math.floor($.browser.version) == 11) ) {
  $('.flexslider').flexslider({
    animation: "fade",
    ...
  });
}

【讨论】：

【解决方案4】：

面临同样的问题 - 淡入淡出动画在 ie9 中有效，但在 ie10+ 中无效。

用css修复：

.flexslider .slides > li {-ms-transition: all 0.8s ease-out;}

【讨论】：