浏览器端兼容性解决方案
自从微软停止对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>
