前端 PC端兼容性問題總結

1.若是圖片加a標籤在IE9-中會有邊框 

　　解決方案:

img{border:none;}

2.rgba不支持IE8

　　解決方案:能夠用 opacity

　　 eg:

opacity:0.7;/*FF chrome safari opera*/ 
filter:alpha(opacity:70);/*用了ie濾鏡,能夠兼容ie*/

　可是,須要注意的是,opacity會影響裏面元素的透明度

3. display:inline-block ie6/7不支持

　　解決方案:

display:inline-block;
*display:inline;

4.默認的body沒有body去掉margin狀況下ie五、六、7邊緣會很寬margin-top加倍  若是處於無聲明狀態那麼全部的ie瀏覽器margin-top加倍

　　解決方案:用css給body添加magin屬性爲0px

body{margin:0;}

5.IE 6.0 Firefox Opera等是 真實寬度=width+padding+border

　IE5.X 真實寬度=width

　　解決方案:

　　方法1. 

div.content { 
　　width:400px;  //這個是錯誤的width(對於ie5來講是正確的），全部瀏覽器都讀到了 
　　voice-family: "\"}\"";  //IE5.X/win忽略了"\"}\""後的內容 
　　voice-family:inherit; 
　　width:300px;  //包括IE6/win在內的部分瀏覽器讀到這句，新的數值(300px)覆蓋掉了舊的 
}　

　　方法2. 

div.content { 
　　width:300px !important;  //這個是正確的width，大部分支持!important標記的瀏覽器使用這裏的數值 
　　width(空格)/**/:400px;  //IE6/win不解析這句，因此IE6/win仍然認爲width的值是300px；而IE5.X/win讀到這句，新的數值(400px)覆蓋掉了舊的，由於!important標記對他們不起做用 
}

6.height不能小於16px,設置較小高度標籤（通常小於10px），在IE6，IE7，遨遊中高度超出本身設置高度

　　解決方案:overflow設置爲hidden

7.min-height不兼容  ie6 7解釋爲超太高度就撐開，而其餘版本瀏覽器則遮蓋下面的層

　　解決方案:min-height:200px; height:auto !important; height:200px; overflow:visible;

8.position:fixed  IE五、6沒法識別此屬性

　　解決方案:

<!--[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有padding時，IE6下100%不能鋪滿的問題*/
　　　　　　　　width: expression(offsetParent.clientWidth);
　　　　　　}

　　　　　　/*下面三組規則用於IE6下top計算*/
　　　　　　#demo_l, #demo_r {
　　　　　　　　top: expression(offsetParent.scrollTop + 300);
　　　　　　}
　　　　　　#demo_t {
　　　　　　　　top: expression(offsetParent.scrollTop);
　　　　　　}
　　　　　　#demo_b {
　　　　　　　　top: expression(offsetParent.scrollTop + offsetParent.clientHeight-offsetHeight);
　　　　　　}
　　</style>
<![endif]-->

9.浮動的div有margin_left屬性ie6會加倍  不管兼容視圖仍是無聲明視圖 

　　解決方案:

　　　　方案一: IE6惟一識別屬性_的方式加_display屬性_display:inline;

　　　　方案二:

　　　　　　條件註釋<!--[if lte IE 6]>
　　　　　　<style>
　　　　　　　　.on{ display:inline }
　　　　　　</style>
　　　　　　<![endif]-->

10.cursor兼容  自定義指針cur格式的圖片url路徑問題不管是兼容仍是無聲明版本

　　解決方案:cursor:url(Hand.cur), url(/Hand.cur), auto;

11.png圖片  IE6裏面的png圖片不能透明 兼容版本和無聲明版本都是 

　　解決方案:

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

　　　</style>
<![endif]-->

12.img浮動  img標籤打回車會形成每一個圖片之間有縫隙

　　解決方案:能夠刪除之間的回車鍵也可讓這些圖片浮動

13.在IE瀏覽器下 input type="text"文本框點擊時後面會出現"X",以及type="password"後面會出現眼睛,如何除去這兩種默認樣式:

　　

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

　　注:IE9-不識別

14.CSS3前綴  -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;
　　  　-webkit-transition:all .3s ease-in-out 0s;
}

注:可是過渡不兼容IE8-,能夠用JS動畫實現

background-size 一樣也不支持IE8,能夠考慮用img

15.漸變

　　解決方案:

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+*/

16.PIE.htc 能夠實現不少css3屬性在IE下的兼容性 如:圓角、陰影、漸變

　　(1) 圓角 border-radius

.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-shadow

.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文件夾同級

17.JS實現點擊跳轉到指定位置

$(".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寫上會一下跳轉到指定位置,若不寫會有過渡效果
   /});