Html Css/css3兼容性总结(兼容主流浏览器包括Ie6)

时间:2022-08-26 15:07:30

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;




Html Css/css3兼容性总结(兼容主流浏览器包括Ie6)