IE等主流浏览器css hack，包括IE6,IE7,IE8,IE9,firefox,chrome

     对于常用的hack，今天搜集了一下资料，好好的学习了一下，愚人码头的一个测试页面写得比较详尽，链接如下： http://www.fantxi.com/demo/html/browser_detector.html

    然后我自己在本地进行了测试，沿用了愚人码头的背景配色，重写了css代码，最后还有一些额外的发现和收获。本次测试主要是针对IE6~IE9，firefox，chrome，opera，IE5.5如此古老的浏览器不在考虑之列。最后，特别注意的是：使用:root对IE9 hack的时候，还要在属性值后面加上”\0” or “\9”，否则FF和chrome下面和IE9的样式一样。而在opera下面只能加"\9",加"\0"的话跟IE9效果相同。

    这里是从晚上搜集的一张图片，主要是IE下的hack

   

    本地demo的html代码：

   

<! DOCTYPE html >  
< html >  
     < head >  
     </ head >  
     < body >  
         < h3 >css hack </ h3 >  
         < div  class ="hack-box" >  
             < div  class ="demo" >  
                .demo的背景色会随浏览器的不同而变化哦，亲！  
             </ div >  
         </ div >  
         < div  class ="detail" >  
             < ol >  
             < li >IE6, 测试区域背景色为:  < span  style ="background:#ccc" >灰色(#ccc) </ span ></ li >  
             < li >IE7, 测试区域背景色为:  < span  style ="background:#f60" >橘色(#f60) </ span ></ li >  
             < li >Opera 9.5-9.6/FF 3.51-FF4, 测试区域背景色为:  < span  style ="background:#f06" >粉色(#f06) </ span ></ li >  
             < li >Safari,Google Chrome,Opera9.2, 测试区域背景色为:  < span  style ="background:#609" >紫色(#609) </ span ></ li >  
             < li >IE8, 测试区域背景色为:  < span  style ="background:#09F" >蓝色(#09F) </ span ></ li >  
             < li >IE9, 测试区域背景色为:  < span  style ="background:#963" >咖啡色(#963) </ span ></ li >  
  
             </ ol >  
             < p  class ="attention" >使用:root对IE9 hack的时候，还要在属性值后面加上”\0” or “\9”，否则FF和chrome下面和IE9的样式一样。而在opera下面只能加"\9",加"\0"的话跟IE9效果相同 </ p >  
         </ div >  
          
     </ body >  
</ html >  

     css代码如下：

 

body {   
                text-align:  center;   
            }   
            .hack-box {   
                margin:  0 auto;   
                width:  300px;   
                height:  200px;   
                border:  3px solid #999;   
            }   
            .detail {   
                margin:  0 auto;   
                width: 400px;   
            }   
            .attention {   
                font-weight:  bold;   
                font-size:  20px;   
            }   
            :root .demo {   
                background: #963\9;   /*  仅IE9适用  */   
            }   
            .demo {   
                width:  300px;   
                height:  200px;   
                background:  #036;   /*  所有浏览器都适用  */   
                background:  #09F\9;   /*  IE6~IE9  */   
                background:  #09F\0;   /*  IE8~IE9  */   
                background:  #09F\0/;   /*  IE8  */   
                *background:  #F60;   /*  IE6/IE7  */   
                +background:  #F60;   /*  IE6/IE7  */   
                @background:  #F60;   /*  IE6/IE7  */   
                >background:  #F60;   /*  IE6/IE7  */   
                _background:  #ccc;   /*  IE6  */   
            }   
            @media all and (min-width:0) {   
                .demo {  
                    background:  #F06;   /*  webkit and opera  */   
                }   
            }  
              
            @media screen and (-webkit-min-device-pixel-ratio:0){   
                .demo {background: #609;} /* webkit (& Opera9.2) */   
            }  
            ol {   
                list-style-type:  none;   
                text-align: left;   
            }  

 

    最后还有一个针对safari和chrome的hack:

 

body:nth-of-type(1) #selector{
   background: #ccc;
}

 

转载于:https://www.cnblogs.com/hutaoer/archive/2012/07/27/2612126.html