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


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

      

      

      

  • 相关阅读:
    杭电OJ 输入输出练习汇总
    七月读书笔记
    情报分析报告阅读笔记
    情报研究与分析入门阅读笔记
    旁观者攻击
    域前置技术相关学习
    CC攻击和C2的区别
    DNS投毒学习分析总结
    数字证书2.0版本学习总结
    《在树洞里》-感悟
  • 原文地址:https://www.cnblogs.com/pomelott/p/6939931.html
Copyright © 2020-2023  润新知