IE和火狐的CSS兼容大全（1）

各个浏览器的兼容问题一直是一个很头痛的问题，有很多的用法居然能完全相反，今天为了解决background-attachment差点没吐血身亡，在网上搜集一些资料，和大家一切分享，也为以后少走弯路。

 

先整理一下条

   1. HTML <!DOCTYPE> 标签

 <!DOCTYPE>标签告知浏览器文档使用哪种 HTML 或 XHTML 规范，该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。 XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。 HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。

 

针对不一样的文档类型，CSS展现出来的效果也是不尽相同的。

 

 

   2.   居中

     2.1    FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行

 

     2.2    FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中

 

 

   3.  !important

      important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权(参见：W3.org的解释)。

 

              语法格式{ sRule!important }，即写在定义的最后面，例如：box{color:red !important;}

 

 

 

      .colortest {
              border:20px  solid #60A179 !important;

              border:20px  solid #00F;

              padding: 30px;

              width : 300px;}  

 

 

     在Mozilla中浏览时候，能够理解!important的优先级，因此显示#60A179的颜色；在IE中浏览时候，不能够理解!important的优先级，因此显示#00F的颜色；

 

 

 

   4. padding

 

 

    FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用上面提到的 !important 另设一个 height 和 width

   5. div中的文字垂直居中问题

   div是个容器，一个Box中由很多行很多元素组成，vertical-align只作用于在同一行内的元素，它的垂直并不是相对于整个Box而言的。表格的单元格相当于一行，所以就能垂直居中

   5.1   单行文本：垂直居中中的方法比较简单，设置div的高度与文字的行高一样就可以了,

 

            即 line-height 和 height 的数值是一样的就可以了,最后给div一个 over-flow: hidden ,让超出的部分隐藏. 这种方法支持块级和内联级元素以及所有的浏览器,不过只能显示一行,而且IE中不支持

< img >等的居中,之所以要用 overflow: hidden ,是因为当用户放大字体时,字会超出div的范围.

 

           设line-hight与div 的高度height一样就行了

 

             div{
                     height: 20px;
l                    ine-height: 20px;
                     overflow: hidden;
                  }

 

    5.2   多行文字

 

            设定一样的 padding-bottom 和 padding-top

 

              div{
                        padding-top: 20px; 
                        padding-bottom: 20px; 
                    }

 

           这种方法同时支持块级和内联极元素以及非文本内容,包括图片等等,也支持所有浏览器,不足的就是不能固定高度

 

 

 

          可以参考一下这个 
         代码如下:

        <div class="demo" id="outerbox">
           <div >
                <p>对于div中文字可以使其垂直居中,我要兼容IE和firefox! </p>
         </div>
      </div>

 

 
        css文件如下:

 
          div.demo{width: 800px;margin: 12px auto;border: 1px solid #1987df;color: inherit;background: #CEE7FF} 
          div#outerbox{height: 300px;position: relative;display:table} 
          div#outerbox div{position: absolute;top: 50%;left: 0}
          div#outerbox p{position: relative;top: -50%;margin: 24px;text-indent: 0; font-size:14px;}
          div#outerbox>div{display:table-cell;vertical-align:middle;position:static}

       这个你可以参考一下，新建一个css文件，把上面的样式copy进去，再在html文件里加入引用

 

 

 

 

 

 

      6。 鼠标小手状

 

        cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以

 

 

 

 

 

 

       7. FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行

 

 

 

 

       8. 初始化定义

        ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义ul{margin:0;padding:0;} 就能解决大部分问题.

 

        所以在写CSS之前现将所有的标签的margin,padding设为0,而后再针对每一个标签做相应的设置

 

        

        9. DIV 的float问题

 

 

 

           如下例子(FloatA，FloatB有float:left效果，NoFloat没有)：

 

          

          

 

 

           < div id="floatA"  ></div>
           < div id= "floatB" ></div>
           < div id= "NOTfloat" ></div>

 

 

 

            我们希望NOTfloat不会继续平移，即和floatA/floatB在同一行上，而是希望继续下排。

 

            在IE中毫无问题，问题是在FF中，它会平移。

 

            解决办法：

 

 

            在floatB 和 NOTfloat之间加上< div class= "clear" ></div>，它的定义如下

 

           

             .clear{clear:both;}

           

              此外，为了让高度能自适应，要在wrapper里面加入overflow:hidden;    当它包含float的BOX的时候，高度自适应在IE下无效，这时候应该出发IE的Layout私有属性，用zoom:1；可以做到。如下：

 

 

             .colwrapper{
                                 overflow:hidden;
                                 zoom:1;
                                 margin:5px auto;}

              10. margin加倍的问题

          设置为float的div在ie下设置的margin会加倍。

          

          解决方案是在这个div里面加上display:inline;

          例如：
            <#div id=/"imfloat/">

         相应的css为

             #IamFloat{
                                 float:left;
                                 margin:5px;/*IE下理解为10px*/
                                 display:inline;/*IE下再理解为5px*/}