前端兼容性问题总结(PC端)

img{border:none;}

opacity:0.7;/FF chrome safari opera/ 
filter:alpha(opacity:70);/用了ie滤镜,可以兼容ie/

display:le-block;
display:le;

body{marg:0;}

div.content { 
　　width:400px;  //这个是错误的width(对于ie5来说是正确的），所有浏览器都读到了 
　　voice-family: "\"}\"";  //IE5.X/w忽略了"\"}\""后的内容 
　　voice-family:herit; 
　　width:300px;  //包括IE6/w在内的部分浏览器读到这句，新的数值(300px)覆盖掉了旧的 
}　

div.content { 
　　width:300px !important;  //这个是正确的width，大部分支持!important标记的浏览器使用这里的数值 
　　width(空格)//:400px;  //IE6/w不解析这句，所以IE6/w仍然认为width的值是300px；而IE5.X/w读到这句，新的数值(400px)覆盖掉了旧的，因为!important标记对他们不起作用 
}

<!--[if lte IE 6]>
　　　<style type="text/css">
　　　　　 html {
　　　　　　　　/这个可以让IE6下滚动时无抖动/
　　　　　　　　background: url(about:black) no-repeat fixed
　　　　　　}
　　　　　　#demo_t, #demo_b, #demo_l, #demo_r {
　　　　　　　　position: absolute;
　　　　　　}
　　　　　　#demo_t, #demo_b {
　　　　　　　　/这个解决body有paddg时，IE6下100%不能铺满的问题/
　　　　　　　　width: expression(offsetParent.clientWidth);
　　　　　　}
　　　　　　/狼蚁网站SEO优化三组规则用于IE6下计算/
　　　　　　#demo_l, #demo_r {
　　　　　　　　: expression(offsetParent.scrollTop + 300);
　　　　　　}
　　　　　　#demo_t {
　　　　　　　　: expression(offsetParent.scrollTop);
　　　　　　}
　　　　　　#demo_b {
　　　　　　　　: expression(offsetParent.scrollTop + offsetParent.clientHeight-offsetHeight);
　　　　　　}
　　</style>
<![endif]-->

　　　　条件注释<!--[if lte IE 6]>
　　　　<style>
　　　　　　.on{ display:le }
　　　　</style>
　　　　<![endif]-->

<!--[if IE ]>
　　　<style type="text/css">
　　　　　#DIVname{
　　　　　　　　background:none;
　　　　　　　　filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizgMethod=scale, src="pngtoumg.png"
　　　　　}
　　　</style>
<![endif]-->

::-ms-clear,::-ms-reveal{display:none;}

 @-webkit-keyframes name{
　　　　0%{动画开始的css样式;}
　　　　100%{动画结束的css样式;}
　}
-webkit-animation:name 8s fite lear;

div.box{
　　　　bottom:-40px;<br>　　  　-webkit-transition:all .3s ease--out 0s;
}

filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#35FEA1,endColorStr=#6E9DFF); /IE 6 7 8/
    background: -ms-lear-gradient(, #35FEA1,  #6E9DFF);/ IE 10 /
    background:-moz-lear-gradient(, #35FEA1,  #6E9DFF); /火狐/
    background:-webkit-gradient(lear, 0% 0%, 0% 100%,from(#35FEA1), to(#6E9DFF));/谷歌/
    background: -webkit-gradient(lear, 0% 0%, 0% 100%,from(#35FEA1), to(#6E9DFF));/ Safari 4-5, Chrome 1-9/
    background: -webkit-lear-gradient(, #35FEA1,  #6E9DFF);/Safari5.1 Chrome 10+/
    background: -o-lear-gradient(, #35FEA1,  #6E9DFF);/Opera 11.10+/

.signBtn{
    height: 40px;
    background-color:#08BCD2;
    color: #fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    behavior: url(css/PIE.htc);
}

.box{
　　width:200px;
　　height:200px;
　　-webkit-box-shadow:1px 0 10px;
　　-moz-box-shadow:1px 0 10px;
　　box-shadow: 1px 0 10px;
　　background-color: #fff;
　　behavior: url(css/PIE.htc);/IE边框阴影/
}

.box{
　　 background-color:rgba(12, 154, 171, 0.29);
    behavior: url(css/PIE.htc);
    -pie-background:rgba(12, 154, 171, 0.29);
}

.box{
   width:200px;
   height:400px;
   background:-webkit-gradient(lear, 0 0, 0 bottom, from(#9F9), to(#393));
   background:-moz-lear-gradient(#9F9, #393);
   -pie-background:lear-gradient(#9F9, #393);
   behavior:url(pie.htc);                
}

$(".arraw-bt").click(function(){
    var scroll_offset = $("#section").offset();
     console.log(scroll_offset);
     $("body,html").animate({//如果只写body,只被chrome支持 只被chrome支持 Firefox和ie不支持
     "scrollTop":scroll_offset.
     },0);//此处0写上会一下跳转到指定位置,若不写会有过渡效果