hack css编写ie下才生效的css

CSS hack方式二：类内属性前缀法

属性前缀法是在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

总结出的规律就是：先一般，再特殊。有兴趣的同学可以试试试试下面CSS，看看和你想的效果是否一样

background-color:blue; /*所有浏览器*/
background-color:red \9;/*所有的ie*/
background-color:yellow \0; /* ie8+*/
+background-color:pink; /*+ ie7*/

支持ie11的hack css

/*  #yjywbm, #linkSelect  label{position:relative;top:-11px \9;}  */     /*  \9不支持ie11 */

 @media screen and (min-width:0\0) {
    /* IE9 , IE10 ,IE11 rule sets go here */
     #yjywbm, #linkSelect  label{position:relative;top:-11px ;} 
}

摘自：IE10 CSS Hack（顺便聊聊IE11的CSS Hack）

• /* IE9+ */
• @media all and (min-width:0) {
•     .divContent{
•         background-color:#eee;
•     }
• }

• /* IE10+ */
• @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)  {
•     .divContent{
•         background-color:#eee;
•     }
• }

摘自：css区分ie8/ie9/ie10/ie11 chrome firefox的代码

IE10、IE11和Microsoft Edge的Hack