浏览器端兼容性解决方案

时间:2022-08-26 15:11:15

自从微软停止对XP的支持后

对我们WEB开发者来说是一种很大的解脱,因为不用再去兼容IE6\7了,为什么也要包含7呢,因为VISTA的市场占有率不足1%,几乎可以忽略不计

这个时候市面上所有浏览器中,完全不兼容HTML5的就只有一款,IE8,如果想着IE8什么时候被微软抛弃就好了,这个是绝对不可能的,因为windows7的系统支持,至少要持续到2018年,那个对现在来说还是太久远

所以、所以我们就要实行一种采取HTML5+CSS3搭建,但是兼容Ie8的解决方案,这样可以在IE8被微软抛弃后,更快捷的抛弃它,而且,最最重要的是CSS3的选择器能够替代很多冗余的JS代码,使得代码更简练

代码直接贴上

 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>