兼容ie8，firefox，chrome浏览器的代码片段

Posted 2021-04-27 Studing

兼容IE：通过 IE条件注释完成Hack，通过条件判断浏览器版本再执行相应内容

条件注释语法:

<!--[if 条件 IE 版本号]>

    满足浏览器要执行的内容

<![endif]-->

eg：

<!--[if gte IE 8]>

    只在大于等于IE8中执行

<![endif]-->

hack实现方式和原理

#hacker{
    color:red; 
    *color:white; /*for ie6,ie7*/
    *+color:blue; /*for ie7*/
    _color:gray; /*for ie6*/
    color:balck !important; /*for firefox*/
    color:yellow \9; /*for ie9*/}

透明  兼容所有浏览器

 

.transparent{
    filter:alpha(opacity=50);
   -moz-opacity:0.5;/**Firefox 3.5即将原生支持opacity
属性，所以本条属性只在Firefox3以下版本有效 ***/
   -khtml-opacity: 0.5; opacity: 0.5; 
}

 

渐变  兼容所有浏览器

.gradient{
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#dedede);
    background: -moz-linear-gradient(top, #ffffff, #dedede);
}

高亮  兼容所有浏览器

.highlighted {
    background: none repeat scroll 0 0 #00ADEE;
    color: #FFFFFF;
    padding: 0 5px;
}

阴影  兼容firefox

.shadow{    
    box-shadow: 0 5px 10px #cecece;;}

圆角  兼容firefox

.radius{    
    -webkit-border-radius: 4px;   /*只支持webkit内核的浏览器*/
    border-radius: 4px;  /*只支持IE内核的浏览器（IE>=7)*/
    -moz-border-radius : 4px; /*只支持Mozilla内核的浏览器*/
    border:#ddd solid 1px;
    padding:4px;
}

超出省略号展示  兼容firefox，ie所有浏览器

.ellipsis{    
    white-space:nowrap;/*设置不折行*/
    text-overflow:ellipsis;/*这就是省略号喽*/
    -o-text-overflow:ellipsis;/*兼容opera*/
    width:80px;
    overflow:hidden;
}

旋转  图片旋转效果，纯css实现，不兼容IE9以下浏览器

.rotate:hover{
     -o-transform: rotate(40deg); /* Opera浏览器 */
    -webkit-transform: rotate(40deg); /* Webkit内核浏览器 */
    -moz-transform: rotate(40deg); /* Firefox浏览器 */
    transform: rotate(360deg);
    transition: all 1s ease-out 0s;
}

首字母  兼容所有浏览器 

.firstletter:first-letter{
     font-size:120%;
}

去除链接虚线框   兼容所有浏览器

<a href="link1.htm" onfocus="this.blur()">link</a>

纯css横向纵向居中   兼容所有浏览器

<div style="width:960px; height:200px; background:red; position:absolute; left:50%; 
margin-left:-480px; top:50%; margin-top:-100px;"></div>