浏览器兼容性问题（移动设备和PC）(2)

-webkit-  webkit渲染引擎  chrome/safari
　　　　　　   -moz-   gecko渲染引擎   firefox
　　　　　　   -ms-    trident渲染引擎  IE
　　　　　　   -o-  　opeck渲染引擎　opera　　　　
　　、过渡、background-size 都需要加前缀
　　eg: 
 @-webkit-keyframes name{
　　　　0%{开始的css样式;}
　　　　100%{结束的css样式;}
　}
-webkit-animation:name 8s infinite linear;
　过渡:
div.box{
　　　　bottom:-40px;<br>　　  　-webkit-transition:all .3s ease-in-out 0s;
}
注:但是过渡不兼容IE8-,可以用JS实现
background-size 同样也不支持IE8,可以考虑用img

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

（1）圆角边界半径

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

（2）阴影盒阴影

.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边框阴影*/
}

（3）背景透明rgba

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

（4）渐变

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

注意: PIE.htc文件的路径是相对于css文件而不是html文件的路径. 上面的示例是将PIE.htc文件与css样式文件放在同一文件夹css中，并将相应的html询问价格和css文件夹置于同一级别

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

解决方案： css 里增加通配符 * { margin: 0; padding: 0; }

解决方案：设置display:inline;

解决方案：超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度

解决方案：使用float 为img 布局

解决方案:

opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

解决方案：为了不让边重叠，可以给子元素增加一个父级元素，并设置父级元素为overflow:hidden；

解决方案：统一使用 cursor:pointer

解决方案：父级元素设置position:relative

有很多兼容性问题，等等，这里没有列出，它们是相对常见的.

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-261754-2.html