浏览器兼容问题小结

1.   IE8下兼容问题。 这个好处理，转化成IE7解析就行，在头部加一行代码： <meta http-euqiv="X-UA-Compatible" content="IE=7" />.  (IE7 兼容了，IE8也就兼容！);

2.   IE6 IE7 FF下不同样式。  这个需要拍下顺序，后面的样式会覆盖前面：

          background:red; /*FF里显示的红色*/  (对IE7 IE6都有效，但后面的样式会覆盖他)

          *background:red; /*只对IE7有效*/ 

          _background:red; /*只对IE6有效*/  

3.   兼容IE6、7、8等多个版本。  在页面头部加入：

         <meta http-equiv="X-UA-Compatible" content="chrome=1"/>    (用于声明当前页面有chrome内核渲染,这是较简单的写法。)

         <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />   (效果是如果安装了GCF，则使用GCF来渲染页面，如果未安装GCF，则使用最高版本的IE内核进           行渲染。 这是较复杂的写法.)

4.   介绍几个CSShack：

         border:2px solid #00f;     /*ff的属性*/    (这个就不用解释了--)
         border:2px solid #0909;    /* IE6/7/8的属性 */     ( 9 是IE6 7 8的属性 )
         border:2px solid #F90; /* IE8支持 */     ( 只有IE8支持)
         _border:2px solid #f00; /*IE6的属性*/    ( _ 只有IE6支持      * 只有IE6 7支持)

     

5.   CSS布局中居中的问题。

         样式定义如下：

               body {text-align: center;}

　　　　    #center { margin-left: auto; margin-right: auto; }

          因为 text-align:center 在IE下有效，但在mozila火狐下不行。

6.   IE下不支持min-width解决方法。

        min-600px;  

        e-xpression(document.body.clientWidth < 600? “600px”: “auto” );      (这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。)

7.   *html .clearfix{ height:1%; }         *+html .clearfix{ height:1%; }

　　     *htnl 和*+html 都是IE特有的标签

          height:1% 用来触发 IE6 下的haslayout。

8.   块元素设置inline-block在IE6 7 下的问题

      但是如果是块级元素使用了inline-block，那在ie6和ie7中是有问题的。

    （ie6/ie7中块元素仅仅是被display:inline-block触发了layout，而它本身就是行布局，所以触发后，块元素依然还是行布局，而不会像火狐等其他浏览器块元素呈递为内联对象。）

     解决办法：

     让标准浏览器识别display:inline-block;让ie6/7识别display:inline;来覆盖上面的display:inline-block; 然后通过zoom:1;来触发haslayout让inline元素在ie中表现得和inline-block元素一样。

    .list1 li{display:inline-block; 150px; *zoom:1;*display:inline;}  加上*zoom:1(触发ie6和ie7下的haslayout);*display:inline(只有ie6和ie7识别);

     注：一定要加在display:inline-block;后面。

 9. position:fixed在IE6 不兼容

*html{ background-image:url(about:blank); background-attachment:fixed; 
/* 解决固定层在IE6下闪的问题 */}
.fixeder{
    width:100%; height:100px;
    position:fixed; clip:rect(0 100% 100% 0); _position:absolute;
    
    /* 底部 */
    left:0px; 
    /*_bottom:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);*/
    _top: expression(documentElement.scrollTop + "px"); 
    /*_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);*/ z-index:999;
}

待续……