使用条件注释完成浏览器兼容
最近做的純PC站需要兼容到IE8，一般使用css hack就能夠完成，但如果兼容到IE7及以下就很頭疼了，使用條件注釋動態加載腳本是個不錯的選擇。
注釋不同的瀏覽器版本 ：
(1)、支持所有的IE瀏覽器（不包括IE10標準模式）?
<!--[if IE]>只有IE6,7,8,9瀏覽器顯示(IE10標準模式不支持)<![endif]-->?
(2)、所有非IE瀏覽器（不包括IE10標準模式）?
<!--[if !IE]><!-->只有非IE瀏覽器顯示(不包括IE10)<!--><![endif]-->?
(3)、IE10瀏覽器?
目前還沒有找到該版本瀏覽器的像<!--[if IE 9]>似的單獨注釋，但IE10做得很不錯了，就單單布局而言，頁面在IE10、FireFox、Chrome上的表現已經沒有什么區別了。?
(4)、IE9瀏覽器?
<!--[if IE 9]>IE9瀏覽器顯示<hr/><![endif]-->?
(5)、IE8瀏覽器?
<!--[if IE 8]>IE8瀏覽器顯示<hr/><![endif]-->?
(6)、IE7瀏覽器?
<!--[if IE 7]>IE7瀏覽器顯示<hr/><![endif]-->?
(7)、IE6瀏覽器?
<!--[if IE 6]>IE6瀏覽器顯示<hr/><![endif]-->?
(8)、IE10以下版本瀏覽器(不包括IE10)?
<!--[if lt IE 10]>IE10以下版本瀏覽器顯示(不包括IE10)<hr/><![endif]-->?
(9)、IE9及IE9以下版本瀏覽器(包括IE9)?
<!--[if lte IE 9]>IE9及IE9以下版本瀏覽器顯示(包括IE9)<hr/><![endif]-->?
(10)、IE6以上版本瀏覽器(不含IE6)?
<!--[if gt IE 6]>IE6以上版本瀏覽器顯示(不含IE6)<hr/><![endif]-->?
(11)、IE7及IE7以上版本瀏覽器?
<!--[if gte IE 7]>IE7及IE7以上版本瀏覽器顯示(包含IE7)<hr/><![endif]-->?
?
1.動態加載樣式表。
<!--[if IE 8]> <link rel="stylesheet" type="text/css" href="ie8.css"> <![endif]--> <!--[if IE 7]> <link rel="stylesheet" type="text/css" href="ie7.css"> <![endif]--> <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="ie6.css"> <![endif]-->2. 動態加載樣式
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>Document</title><style type="text/css" media="screen">body{height: 700px;}.ie6{background: #ff0;}.ie7{background: #f00;}.ie8{background: #f0f;}.ie9{background: #00f;}.chrome{background: #000;}</style> </head> <!--[if !IE]><!--><body class="chrome" lang="zh-cn"><!--><![endif]--> <!--[if lt IE 7 ]><body class="ie6" lang="zh-cn"><![endif]--> <!--[if IE 7 ]><body class="ie7" lang="zh-cn"><![endif]--> <!--[if IE 8 ]><body class="ie8" lang="zh-cn"><![endif]--> <!--[if IE 9 ]><body class="ie9" lang="zh-cn"><![endif]--> </body> </html>3. 附常用條件注釋
<!--[if IE]>只有IE6,7,8,9瀏覽器顯示(IE10標準模式不支持)<hr/><![endif]--> <!--[if !IE]><!-->只有非IE瀏覽器顯示(不包括IE10)<hr/><!--><![endif]--> <!--[if IE 9]>IE9瀏覽器顯示<hr/><![endif]--> <!--[if IE 8]>IE8瀏覽器顯示<hr/><![endif]--> <!--[if IE 7]>IE7瀏覽器顯示<hr/><![endif]--> <!--[if IE 6]>IE6瀏覽器顯示<hr/><![endif]--> <!--[if lt IE 10]>IE10以下版本瀏覽器顯示(不包括IE10)<hr/><![endif]--> <!--[if lte IE 9]>IE9及IE9以下版本瀏覽器顯示(包括IE9)<hr/><![endif]--> <!--[if gt IE 6]>IE6以上版本瀏覽器顯示(不含IE6)<hr/><![endif]--> <!--[if gte IE 7]>IE7及IE7以上版本瀏覽器顯示(包含IE7)<hr/><![endif]-->
?
轉載于:https://www.cnblogs.com/pomelott/p/6939931.html
總結
以上是生活随笔為你收集整理的使用条件注释完成浏览器兼容的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux安装/卸载软件教程
- 下一篇： HTML5 Canvas爱心时钟代码