CSS hack 集锦

本文的所有点子来自网络以及自身实践!

测试环境: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 高版本到底版本

参考:

(1)慎用\0的CSS Hack

(2)CSS hack是什么?IE6\7\8\9\10浏览器的CSS hack大全介绍

(3)IE10 CSS Hack(顺便聊聊IE11的CSS Hack)

猜你喜欢

转载自blog.csdn.net/u010682774/article/details/79625336