css hack相关记录

CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome 等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效 果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。

常用的CSS hack方式

（1）方式一 条件注释法

只在IE下生效

<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->

只在IE6下生效

<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->

只在IE6以上版本生效

<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->

只在IE8上不生效

<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]-->

非IE浏览器生效

<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->

（2）方式二 类内属性前缀法

属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。

IE浏览器各版本 CSS hack 对照表

hack

写法

实例

IE6(S)

IE6(Q)

IE7(S)

IE7(Q)

IE8(S)

IE8(Q)

IE9(S)

IE9(Q)

IE10(S)

IE10(Q)

*

*color

青色

Y

Y

Y

Y

N

Y

N

Y

N

Y

+

+color

绿色

Y

Y

Y

Y

N

Y

N

Y

N

Y

-

-color

黄色

Y

Y

N

N

N

N

N

N

N

N

_

_color

蓝色

Y

Y

N

Y

N

Y

N

Y

N

N

#

#color

紫色

Y

Y

Y

Y

N

Y

N

Y

N

Y

\0

color:red\0

红色

N

N

N

N

Y

N

Y

N

Y

N

\9\0

color:red\9\0

粉色

N

N

N

N

N

N

Y

N

Y

N

!important

color:blue !important;color:green;

棕色

N

N

Y

N

Y

N

Y

N

Y

Y

说明：在标准模式中

• “-″减号是IE6专有的hack

• “\9″ IE6/IE7/IE8/IE9/IE10都生效

• “\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack

• “\9\0″ 只对IE9/IE10生效，是IE9/10的hack

（3）CSS hack方式三：选择器前缀法

选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。

目前最常见的是

*html  *前缀只对IE6生效

*+html   *+前缀只对IE7生效

@media screen\9{...} 只对IE6/7生效

@media \0screen {body { background: red; }} 只对IE8有效

@media \0screen\,screen\9{body { background: blue; }} 只对IE6/7/8有效

@media screen\0 {body { background: green; }}  只对IE8/9/10有效

@media screen and (min-width:0\0) {body { background: gray; }}  只对IE9/10有效

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }}  只对IE10有效等等

实例：

/*该demo实例是用于区分标准模式下ie6~ie9和Firefox/Chrome的hack，注意顺序 
IE6显示为：绿色， 
IE7显示为：黑色， 
IE8显示为：红色， 
IE9显示为：蓝色， 
Firefox/Chrome显示为：橘色， 
（本例IE10效果同IE9,Opera最新版效果同IE8） 
*/ 
.iehack{ 
    background-color:orange;  /* all - for Firefox/Chrome */  
    background-color:red\0;  /* ie 8/9/10/Opera - for ie8/ie10/Opera */  
    background-color:blue\9\0;  /* ie 9/10 - for ie9/10 */  
    *background-color:black;  /* ie 6/7 - for ie7 */  
    _background-color:green;  /* ie 6 - for ie6 */  
    +background-color:#a200ff; /*IE6、7*/
    .background-color:#00deff\9; /*IE6、7、8*/
}

转载于:https://my.oschina.net/cherryzhang/blog/546887