zoukankan      html  css  js  c++  java
  • 浏览器兼容问题小结

    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;
    }
    View Code

    待续……

  • 相关阅读:
    1442. Count Triplets That Can Form Two Arrays of Equal XOR
    1441. Build an Array With Stack Operations
    312. Burst Balloons
    367. Valid Perfect Square
    307. Range Sum Query
    1232. Check If It Is a Straight Line
    993. Cousins in Binary Tree
    1436. Destination City
    476. Number Complement
    383. Ransom Note
  • 原文地址:https://www.cnblogs.com/fanxiaowu/p/4386903.html
Copyright © 2011-2022 走看看