兼容性
Posted murenyangqun
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了兼容性相关的知识，希望对你有一定的参考价值。
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
以上是关于兼容性的主要内容，如果未能解决你的问题，请参考以下文章