浏览器端兼容性解决方案

时间 2019-11-09

原文原文链接

自从微软中止对XP的支持后css

对咱们WEB开发者来讲是一种很大的解脱，由于不用再去兼容IE6\7了，为何也要包含7呢，由于VISTA的市场占有率不足1%，几乎能够忽略不计html

这个时候市面上全部浏览器中，彻底不兼容HTML5的就只有一款，IE8,若是想着IE8何时被微软抛弃就行了，这个是绝对不可能的，由于windows7的系统支持，至少要持续到2018年，那个对如今来讲仍是过久远html5

因此、因此咱们就要实行一种采起HTML5+CSS3搭建，可是兼容Ie8的解决方案，这样能够在IE8被微软抛弃后，更快捷的抛弃它，并且，最最重要的是CSS3的选择器可以替代不少冗余的JS代码，使得代码更简练jquery

代码直接贴上css3

 1 <!DOCTYPE html>
 2 <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
 3 <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
 4 <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
 5 <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
 6   <head>
 7     <meta charset="utf-8">
 8     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 9     <title></title>
10     <meta name="description" content="">
11     <meta name="viewport" content="width=device-width, initial-scale=1">
12     <link rel="stylesheet" href="css/style.css">
13     <!--[if lt IE 9]><script src="js/vendor/selectivizr-1.0.2.min.js"></script><![endif]-->
14     <!--兼容css3选择器-->
15     <!--[if IE]>   
16     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>  
17     <![endif]--> 
18     <!--兼容html5标签 -->
19     <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
20     <!--兼容性检测-->
21     <style>
22     p:first-letter{background:red}
23     </style>
24   </head>
25   <body>
26     <!--[if lt IE 9]>
27       <div class="browsehappy">
28         <p>
29           You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/" target="_blank">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true" target="_blank">activate Google Chrome Frame</a> to improve your experience.
30         </p>
31       </div>
32     <![endif]-->
33 
34 
35 
36     <!--[if lt IE 9]>
37       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
38       <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
39     <![endif]-->
40     <!--[if gt IE 8]><!-->
41       <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
42       <script>window.jQuery || document.write('<script src="js/vendor/jquery-2.1.0.min.js"><\/script>')</script>
43     <!--<![endif]-->
44     <script src="js/plugins.js"></script>
45     <script src="js/main.js"></script>
46   </body>
47 </html>