首页 > 代码库 > 使用条件注释完成浏览器兼容
使用条件注释完成浏览器兼容
最近做的纯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="http://www.mamicode.com/ie8.css"> <![endif]--> <!--[if IE 7]> <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/ie7.css"> <![endif]--> <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/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]-->
使用条件注释完成浏览器兼容