本文的所有点子来自网络以及自身实践!
测试环境:IE5/IE7/IE8/IE9/IE10/Edge 文档模式
(1)\0 这个标记在做登录表单的时候兼容IE10,IE9的时候用过
使用场景:IE8,IE9,IE10,Edge,IE11(其他资料显示奏效)
.name{
color:red;
color:pink\0;//\0紧贴pink,否则IE8失效
}
(2)\9 (<meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 可能会影响结果)
使用场景:IE5,IE7,IE8,IE9,IE10
.name{
color:red;
color:pink\9;
}
(3)+
使用场景:<=IE7
.name{
color:red;
color:pink\9;
+color:blue;
}
(4)_
使用场景:IE6
.name{
color:red;
color:pink\9;
_color:blue;
}
(5)*
使用场景:IE6,IE7
.name{
color:red;
color:pink\9;
*color:blue;
}
总结:s表示Standards Mode即标准模式,Q表示Quirks Mode,即兼容模式。
hack | 示例 | IE6(S) | IE6(Q) | IE7(S) | IE7(Q) | IE8(S) | IE8(Q) |
* | *color | Y | Y | Y | Y | N | Y |
+ | +color | Y | Y | Y | Y | N | Y |
- | -color | Y | Y | N | N | N | N |
_ | _color | Y | Y | N | N | N | N |
# | #color | Y | Y | Y | Y | N | Y |
\0 | color:red\0; | N | N | N | N | Y | N |
\9 | color:red\9; | Y | Y | Y | Y | Y | Y |
(6)!important
hack | 示例 | IE6(S) | IE6(Q) | IE7(S) | IE7(Q) | IE8(S) | IE8(Q) |
!important | color:red !important; | N | N | Y | N | Y | N |
(7)条件注释语句(IE)
使用场景:>IE5 关键字:gt:> lt:< gte:>= lte:<= !:其他版本
<!--[if IE]>所有IE<![endif]-->
<!--[if IE 7]>IE7<![endif]-->
<!--[if gt IE 9]>大于IE9<![endif]-->
<!--[if lte IE 9]>小于等于IE9<![endif]-->
<!--[if !IE 9]>除了IE9<![endif]-->
(8)mate-渲染模式统一
使用场景:X-UA-Compatible是IE8的一个专有meta属性,告诉IE8采用何种版本渲染页面,因为刚推出IE8时,很多网页无法适应高版本浏览器,于是出现了这个属性用来强制IE8用低版本方式渲染;
推荐使用如下配置:IE=edge,使用最新引擎渲染页面;chrome=1可以激活Chome Frame
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
What is Chome Frame?(Google宣布2014年1月停止支持)
中文名字:谷歌浏览器内嵌框架,是Google推出的一款免费的用于Internet Explore专用插件。Chrome Frame会用最新版的chome webkit内核和Javascript引擎注入到IE中,用chrome的webkit引擎处理网页,使IE支持高版本的web技术。
兼容性:IE6,IE7,IE8,IE9
使用:希望IE浏览器自启动Chrome Frame渲染网页?step1,IE安装Chrome Frame插件;step2,(作为使用者)注册表修改 || (作为开发者)网页中添加http头部meta,设置chrome=1开启
(9)@media screen { }
使用场景:>=IE9
@media screen {
.name{
color: red;
color:blue\9;//IE9 IE10识别这个
}
}
(10)@supports (not (-ms-accelerator:true)){}
使用场景:非IE浏览器
@supports (not (-ms-accelerator:true)) {
.name{
color:red;
}
}
(11) @media 中 -ms-high-contrast属性(我没用过,IE10也很少出现兼容性问题)
使用场景:IE10 IE10支持媒体查询,然后也支持-ms-high-contrast这个属性,所以用它来hack IE10
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10-specific styles go here */
}
if (window.matchMedia("screen and (-ms-high-contrast: active), (-ms-high-contrast: none)").matches) {
document.documentElement.className += "ie10";
}
(12)@cc_on(没用过)利用IE私有的条件编译+条件注释针对IE10提出hack
<!--[if !IE]><!--><script>
if (/*@cc_on!@*/false) {
document.documentElement.className+=' ie10';
}
</script><!--<![endif]-->
Note:CSS的解析从上至下,解析到不认识的就忽略,书写顺序为:color--->+color--->_color 高版本到底版本
参考: