CSS兼容寫法整理

css3(含ie9以下)

1.box-shadow

.element {
    -moz-box-shadow: 2px 2px 10px #909090;/*兼容firefox*/
    -webkit-box-shadow: 2px 2px 10px #909090;/*兼容safari或chrome*/
    box-shadow: 2px 2px 10px #909090;/*兼容opera或ie9*/
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);/*兼容ie*/
}

2.transition

.element {
    -webkit-transition: background-color linear .8s;
    -moz-transition: background-color linear .8s;
    -o-transition: background-color linear .8s;
    transition: background-color linear .8s;
}

3. border-radius

.element {
    -webkit-border-radius: 10px 11px 12px 13px;
    -moz-border-radius: 10px 11px 12px 13px;
    border-radius: 10px 11px 12px 13px;
}

4.漸變

.element {    
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#80c1e7), to(#213c7c));  
    background: -webkit-linear-gradient(left, #80c1e7, #213c7c);  
    background: -moz-linear-gradient(left, #80c1e7, #213c7c);  
    background: -o-linear-gradient(left, #80c1e7, #213c7c);  
    background: -ms-linear-gradient(left, #80c1e7, #213c7c);  
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #80c1e7, endColorstr = #213c7c);  
}

5.opacity

.element{
      filter:alpha(opacity=50);   
     -moz-opacity:0.5;       
     -khtml-opacity: 0.5;  
     opacity: 0.5;
}

6.background-size

//兼容ie8,需要引用backgroundsize.min.htc，自行百度

.element{
    background: url(images/126.jpg) center no-repeat;
    background-size: cover;
    -ms-behavior: url(backgroundsize.min.htc);//相對路徑
    behavior: url(backgroundsize.min.htc);//相對路徑
}

7. css3選擇器nth-child()失效寫法，舉個栗子

ie9以上寫法：

.demo p:nth-child(2)

ie8及以下寫法：

.demo p+p