瀏覽器端兼容性解決方案

時間 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。