码迷,mamicode.com
首页 > 其他好文 > 详细

使用条件注释完成浏览器兼容

时间:2017-06-04 12:59:54      阅读:213      评论:0      收藏:0      [点我收藏+]

标签:选择   firefox   使用   back   meta   css hack   document   doctype   log   

最近做的纯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]--> 

  

  

  

 

使用条件注释完成浏览器兼容

标签:选择   firefox   使用   back   meta   css hack   document   doctype   log   

原文地址:http://www.cnblogs.com/pomelott/p/6939931.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!