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}