兼容性

时间:2019-03-16 15:37:15   收藏:0   阅读:152

if IE

   <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
   <!--[if IE]> 所有的IE可识别 <![endif]-->
   <!--[if IE 8]> 仅IE8可识别 <![endif]-->
   <!--[if lt IE 8]> IE8以及IE8以下版本可识别 <![endif]-->
   <!--[if gte IE 8]> IE8以及IE8以上版本可识别 <![endif]-->

IE8

1、支持部分html5标签

     head设置:

     <!--[if lt IE 9]>

            <script src="html5shiv.min.js"></script>

     <![endif]-->

    css设置:

     header,footer,main,nav,section,aside,article{

             display:block;

     }

2、支持css3媒体查询

    head设置:

     <!--[if lt IE 9]>

            <script src="respond.min.js"></script>

     <![endif]-->

     <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

3、支持css3属性圆角、阴影、渐变、多背景

   网站目录加入PIE.htc文件

   css设置:

   {

    behavior:url(PIE.htc文件相对html文件地址);

    }

   注意事项

   z-index问题:设置目标元素position:relative或是设置祖先元素position:relative并赋予一个z-index值(不可为-1)

   相对路径问题:PIE.htc文件相对html文件地址

   缩写问题:只能使用缩写

   提供正确的Content-Type:

IE9

1、支持部分html5标签

     head设置:

     <!--[if lt IE 9]>

            <script src="html5shiv.min.js"></script>

     <![endif]-->

    css设置:

     header,footer,main,nav,section,aside,article{

             display:block;

     }

2、支持css3媒体查询

    head设置:

     <!--[if lt IE 9]>

            <script src="respond.min.js"></script>

     <![endif]-->

     <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

3、支持css3属性圆角、阴影、渐变、多背景

   网站目录加入PIE.htc文件

   css设置:

   {

    behavior:url(PIE.htc文件相对html文件地址);

    }

   注意事项

   z-index问题:设置目标元素position:relative或是设置祖先元素position:relative并赋予一个z-index值(不可为-1)

   相对路径问题:PIE.htc文件相对html文件地址

   缩写问题:只能使用缩写

   提供正确的Content-Type:

IE10

IE11

Chrome

Firefox

Opera

Safari

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!