兼容性

标签：ati   圆角   comment   元素   spl   路径   HTML5标签   art   z-index   

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

兼容性

标签：ati   圆角   comment   元素   spl   路径   HTML5标签   art   z-index   

原文地址：https://www.cnblogs.com/murenyangqun/p/10542387.html