브라우저 공통 호환성 문제

CSS                ，     IE Firefox         ，          。

      ：

1.DOCTYPE    CSS   

2.FF: div    margin-left, margin-right   auto      , IE   

3.FF: body    text-align  , div      margin: auto(    margin-left,margin-right)     

4.FF:    padding  , div     height   width,   IE   ,      !important      height   width

5.FF:    !important, IE    ,    !important   FF       

6.div        : vertical-align:middle;          DIV    line-height:200px;       ，      。            

7.cursor: pointer       IE FF         ， hand   IE   

8.FF:          ，    display: block,      float: left      。   menubar,   a   menubar                ,     height,     menubar        。

9. mozilla firefox IE  BOX           2px    ：

div{margin:30px!important;margin:28px;}
     margin         ，      !important    IE    ，          。   IE        ：

div{maring:30px;margin:28px}
               ，       margin:XXpx!important;

10.IE5  IE6 BOX     
IE5 

div{width:300px;margin:0 10px 0 10px;}
div        300px-10px(   )-10px(   )  div    280px，  IE6            300px+10px(   )+10px(   )=320px    。           

div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
    /**/         ，   IE5 firefox    IE6   ，        ，      ，  ！：）

11.ul   Mozilla     padding  ,  IE   margin       

ul{margin:0;padding:0;}
         

    ：

1、float div     。

  ：(  floatA、floatB        float:left;)

<#div id=”floatA” ></#div>
<#div id=”floatB” ></#div>
<#div id=”NOTfloatC” ></#div>
   NOTfloatC        ，       。
     IE     ，    FF。   NOTfloatC  float  ，   float    。

 

<#div class=”floatB”></#div>
<#div class=”NOTfloatC”></#div>
    

<#div class=”clear”></#div>
  div         ，           ，         float   div  ，          ，       。
   clear            ：

.clear{
clear:both;}
  ，          ，  wrapper    overflow:hidden;
   float box   ，       IE   ，       IE layout    (   IE ！) zoom:1;    ，        。
     wrapper    ：

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

   float div ie    margin   。    ie6    bug。
        div    display:inline;
  ：

<#div id=”imfloat”></#div>
   css 

#IamFloat{
float:left;
margin:5px;/*IE    10px*/
display:inline;/*IE     5px*/}
3、         

    ，           ，   、  float div ，         。 IE ，            div  。    Photoshop  Firework        。

4、       

          ，        。         ，          ，      。（             ，         ）

5、      - !important;

                ,       .FF  ”!important”       ,  IE    .  

.tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}
      ，    xxxx !important           ，      

텍스트 링크:http://www.cnblogs.com/hnyei/archive/2011/10/19/2217347.html