jQuery版本兼容 ie11 ie8不兼容jquery

ie8的兼容问题一直是一个很头疼的问题，但是你又必须要去解决，很多网页在其他浏览器上都能正常运行，但是唯独ie8及其以下运行都存在问题，这是因为HTML5、CSS3等很多主流技术都不兼容ie8，所以我们就需要让它兼容。

一、meta标签

//自适应
<meta name="viewport" content="width=device-width, initial-scale=1">
//优先使用最新的的ie版本
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
        <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
        //设置网页字符集编码
<meta http-equiv=Content-Type content="text/html; charset=utf-8"/>

二、jQuery版本

jQuery2及其以上的版本是不兼容ie8的，所以我们要兼容它应该下载jQuery1…..的版本。
我这里用到是jquery1.10.2.js。

<script type="text/javascript" src="js/jquery1.10.2.js" ></script>

三、兼容HTML5的元素
比如像HTML新增的标签：nav、article、section、header、footer等，这些在ie8都是不兼容的，解决这个问题我们可以引入两个js文件：html5shiv.min.js、respond.min.js

<script type="text/javascript" src="js/ie8/html5shiv/html5shiv.min.js"></script>
<script type="text/javascript" src="js/ie8/Respond/respond.min.js"></script>

除此之外，还需要把这些元素设置成块级元素。

/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

四、兼容视频播放器
我找的是videoJS插件，官网上说这个可以兼容ie8，但是当我把官网的代码拷贝到自己的计算机运行但是不行，然后又去百度，发现很多人都有这个问题，最终找到了一个可以解决该问题。

• ie11截图
  
• ie8截图
  
  
  虽然在ie8下有些图标没有正常显示，但是至少可以播放了。当我把视频文件换成本地的时候，这个就播放不了了，我觉得应该是本地只有.mp4的文件，没有其他格式的文件。

引入的文件：

<!--css-->
 <link rel="stylesheet" href="css/ie8/video-js.css"/>
 <link rel="stylesheet" href="css/ie8/style.css" />
<!--js-->
<!-- If you'd like to support IE8-->
<script type="text/javascript" src="js/ie8/videojs/videojs-ie8.js"></script>
<script type="text/javascript" src="js/ie8/videojs/html5.js"></script>
<script type="text/javascript" src="js/ie8/videojs/video.js"></script>

<!--视频播放器-->
                        <video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered" src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" controls preload="auto" width="368" height="291" poster="images/article1.jpg" data-setup="{}">
                            <source src='http://www.w3school.com.cn/example/html5/mov_bbb.mp4' type='video/mp4'></source>
                            <source src='videos/popin.webm' type='video/webm'></source>
                            <!--  <source src='videos/popin.ogg' type='video/ogg'></source> -->
                            <object id="flash_fallback_1" class="vjs-flash-fallback" width="368" height="291" type="application/x-shockwave-flash" data="js/videojs/flowplayer.swf">
                                <param name="movie" value="js/videojs/flowplayer.swf" />
                                <param name="allowfullscreen" value="true" />
                                <param name="flashvars" value='config={"playlist":["img/confident.jpg", {"url": "http://www.w3school.com.cn/example/html5/mov_bbb.mp4","autoPlay":false,"autoBuffering":true}]}' />
                                <img src="img/confident.jpg" width="280" height="210" alt="Poster Image"  title="No video playback capabilities." />
                            </object>
                        </video>

五、兼容支持css3伪类选择器

正常情况下：

ie8下：

就是因为在css里面写了伪类选择器，在ie8里面识别不了，所以最终显示是这样

.content-ul li:not(first-of-type) {
    padding: 1em;
    border-bottom: 1px dashed #666;
}

解决办法：
引入selectivizr-min.js，就能正常显示了。

<script type="text/javascript" src="js/ie8/selectivizr-1.0.2/selectivizr-min.js"></script>

注意：jQuery版本一定不能太高，在调试的过程中就是因为这个问题卡了很久，页面都不能正常显示。

目前只做了这些兼容ie8，以后碰到了再写吧！