브라우저 공통 호환성 문제

3266 단어
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

좋은 웹페이지 즐겨찾기