1. 程式人生 > >Html Css/css3相容性總結(相容主流瀏覽器包括Ie6)

Html Css/css3相容性總結(相容主流瀏覽器包括Ie6)

1. 360以極速模式開啟網頁:

預設用急速核心,增加標籤:  <meta name="renderer" content="webkit">
預設用ie相容核心,增加標籤:<meta name="renderer" content="ie-comp">

預設用ie標準核心,增加標籤:<meta name="renderer" content="ie-stand">

2. CSS3選擇器 :nth-child(2n)相容性

解決:ie8及以下

  .list li:nth-child(4n){margin-right:0;}
  //這樣直接寫只有在支援CSS3的瀏覽器中才可正常顯示。
 
  $(document).ready(function(){
      $(".list li:nth-child(4n)").css("margin-right","0");
  });
  用jquery這樣寫,在IE瀏覽器中就會很好的顯示了。

3. display:inline-block; 相容性

   解決:ie6/7  { *display:inline;*zoom:1; }

4. CSS3選擇器 :first-child |  :last-child相容性

    解決:ie6/7
   
    margin-right:10px; *margin-right: expression(this.nextSibling==null?"0":"6px");                  //last-child  
    
    margin-right:10px; *margin-right: expression(this.previousSibling==null?"0":"6px");           //first-child

5. Safari Hack 之line-height 相容性

   解決:文字上移   
      [;line-height:1;] 真有用! //safari
      或者  
      line-height:26px; line-height:1 !important;
     
      *line-height:26px;  //IE6
      +line-height:26px;  //IE7
      line-height:26px\0; //IE8

6.  IE8 select相容

    解決:文字下沉
      height:28px; line-height:20px; padding:4px;   //通過padding值

7. 去掉焦點線  { *:focus {noFocusLine: expression(this.onFocus=this.blur());} 

8.  IE6下,DIV表格外邊無邊線?

     解決:從內部補進去。
    .orderList-con{ border:1px solid #c9c9ca; margin-bottom:37px; } 
    .orderHistory-hd{ background:#dbebc6; *border-left: ;*border-right:;*border-top:; }
    .orderHistory-bd{ *border-left: ;*border-right:;*border-top:; }

9.  IE6下,margin-top負值相容(被切頭)

    解決:加上position:relative即可
      .tit{ margin-top:-20px; font-size:36px; text-align:center; position:relative }

10.IE6下,min-width相容

    解決:min-width: 600px;
               width:e-xpression(document.body.clientWidth < 600? "600px": "auto" );   

11、IE6,7下 input自適應寬相容

      解決:width:auto;
                overflow:visible;  //剪下為影象大小

   

12.如何去掉圖片下面白色Bug?

    解決: img{ display:block; 或vertical-align: top; }
                或float 都行

13. 去除inline-block元素間間距

    解決:

     /*IE6/7瀏覽器有時候會有1畫素的間距*/
    .abc{
           height: 100px;
           font-size: 0;-webkit-text-size-adjust:none;
    }
   a{
          display: inline-block;*display: inline;*zoom: 1;
          font-size: 12px;padding: 10px;background: #c00;color: #fff;
    }

14.蘋果移動端input有內陰影,如何去除?
解決:

  {
     appearance: none;
     -moz-appearance: none; 
     -webkit-appearance: none;  
  }

15.網頁相容檢視

   其他瀏覽器正常,IE11勾選相容檢視模式樣式顯示有差別?

解決:● 先檢查是不是Html寫的不規範;

           ● 否則就是缺IE6 hack,例如*bottom:20px;

16.清除滾動條(包括h5瀏覽器預設樣式)

   ::-webkit-scrollbar{width:10px;background-color:#fff}
   ::-webkit-scrollbar-thumb{background-color:#fff;border-radius:10px;border:2px solid #fff;}
   ::-webkit-scrollbar-thumb:hover{background-color:#fff;}
   ::-webkit-scrollbar-thumb:active{border:0;border-radius:0;background-color:#fff}
   ::-webkit-scrollbar-thumb:window-inactive{background-color:#fff}