兼容性
作者:互联网
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
标签:IE8,兼容性,htc,文件,PIE,relative,设置 来源: https://www.cnblogs.com/murenyangqun/p/11089413.html