CSS中IE6、7和火狐对margin、padding的兼容性解析

1¡¢IEÓëFire Foxʶ±ðCSSÊôÐÔÇø±ð±êÇ© !important

#page_body{
width: 1000px !important;
height:30px !important;

width: 980px ;
height:36px ;
}

ÒÔÉÏÑùʽ
ÔÚIE6/7ÖÐÖ»Ö´ÐÐwidth: 980pxÓëheight:36px
FireFoxÖÐÔòÓÅÏÈÖ´ÐдøÓÐ!important±êÇ©µÄCSSÐÐwidth: 1000pxÓëheight:30px

¼Çס£¬ÒÔÉÏ´úÂëµÄ˳Ðò²»Äܵߵ¹¡£

2¡¢div¾ÓÖÐÇø±ð

FF:margin:0 auto 0 auto !important;
IE:margin:0 auto;

FF: div ÉèÖà margin-left, margin-right Ϊ auto ʱÒѾ­¾ÓÖÐ

3¡¢Îı¾ÄÚÈݾÓÖÐ

FF:margin:0 auto 0 auto !important;text-align:center
IE:text-align:center

FF: body ÉèÖà text-align ʱ, div ÐèÒªÉèÖà margin: auto(Ö÷ÒªÊÇ margin-left,margin-right) ·½¿É¾ÓÖÐ

4¡¢widthÓëmargin,paddingÖ®¼äµÄ¿í¶È¼ÆËãÎÊÌâÇø±ð

Ò»¸ö600px¿íµÄdiv£¬margin,paddingµÄÖµ¼ÆËãÇø±ð

ie{width: 600px;margin:10px;padding10px;}

ÔÚFirefoxÖÐÓ¦ÐÞ¸ÄΪ
FF{width: 560px;margin:10px;padding10px;}

Ò²¾ÍÊÇ˵ÔÚFFÖУ¬margin,paddingµÄ×óÓÒÖµÒ²ÒªËãÔÚwidthÖУ¬600-10×2-10X2=560px

ÔÚ½øÐÐDiv+CssÖع¹ÖУ¬IEÓëFFµÄÅÅ°æ½á¹¹ÖУ¬×î¹Ø¼üÊǵڶþºÍµÚËĵ㣬Èç¹û²»´¦ÀíºÃÒÔÉϼ¸¸öÎÊÌ⣬ÄÇôÄãµÄÄãµÄÍøÕ¾ÔÚIEÖÐä¯ÀÀÊÇÄÇô¶¨Î»¾«È·£¬ÅÅ°æÍêÃÀ£¬Ò»µ½Fire FoxÖоÍÊÇÂÒÆß°ËÔ㣬ºáÆßÊ÷°ËµÄ¡£

×îºó˵һ¾ä£¬Èç¹ûÄãÒª°ÑÄãµÄÍøÕ¾¸ÄΪһ¸ö¼æÈÝÐÔÍêÃÀµÄDiv+CssÍøÕ¾£¬ÄÇôÄã¾Í×¼±¸´óÁ¿µÄCSS֪ʶ£¬ÄÇÅÂÄãÒ»¸ö¾­ÑéÀϵ½µÄ¸ßÊÖ£¬Ò²ÒªÎªÒ»Ð©¼æÈÝBUG¸¶³ö±È½ÏÓÃtableÅÅ°æµÄÍøÕ¾¸ü¶àµÄʱ¼ä¡£

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 id=”floatB” >
< #div id=”NOTfloatC” >
ÕâÀïµÄNOTfloatC²¢²»Ï£Íû¼ÌÐøƽÒÆ£¬¶øÊÇÏ£ÍûÍùÏÂÅÅ¡£
Õâ¶Î´úÂëÔÚIEÖкÁÎÞÎÊÌ⣬ÎÊÌâ³öÔÚFF¡£Ô­ÒòÊÇNOTfloatC²¢·Çfloat±êÇ©£¬±ØÐ뽫float±êÇ©±ÕºÏ¡£
ÔÚ
< #div class=”floatB”>
< #div class=”NOTfloatC”>
Ö®¼ä¼ÓÉÏ
< #div class=”clear”>
Õâ¸ödivÒ»¶¨Òª×¢ÒâÉùÃ÷λÖã¬Ò»¶¨Òª·ÅÔÚ×îÇ¡µ±µÄµØ·½£¬¶øÇÒ±ØÐëÓëÁ½¸ö¾ßÓÐfloatÊôÐÔµÄdivͬ¼¶£¬Ö®¼ä²»ÄÜ´æÔÚǶÌ×¹Øϵ£¬·ñÔò»á²úÉúÒì³£¡£
²¢ÇÒ½«clearÕâÖÖÑùʽ¶¨ÒåΪΪÈçϼ´¿É£º
.clear{
clear:both;}
´ËÍ⣬ΪÁËÈø߶ÈÄÜ×Ô¶¯ÊÊÓ¦£¬ÒªÔÚwrapperÀïÃæ¼ÓÉÏoverflow:hidden;
µ±°üº¬floatµÄboxµÄʱºò£¬¸ß¶È×Ô¶¯ÊÊÓ¦ÔÚIEÏÂÎÞЧ£¬ÕâʱºòÓ¦¸Ã´¥·¢IEµÄlayout˽ÓÐÊôÐÔ(Íò¶ñµÄIE°¡£¡)ÓÃzoom:1;¿ÉÒÔ×öµ½£¬ÕâÑù¾Í´ïµ½Á˼æÈÝ¡£
ÀýÈçijһ¸öwrapperÈç϶¨Ò壺
.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}
2¡¢margin¼Ó±¶µÄÎÊÌâ¡£
ÉèÖÃΪfloatµÄdivÔÚieÏÂÉèÖõÄmargin»á¼Ó±¶¡£ÕâÊÇÒ»¸öie6¶¼´æÔÚµÄbug¡£
½â¾ö·½°¸ÊÇÔÚÕâ¸ödivÀïÃæ¼ÓÉÏdisplay:inline;
ÀýÈ磺
< #div id=”imfloat”>
ÏàÓ¦µÄcssΪ
#IamFloat{
float:left;
margin:5px;
display:inline;}
3¡¢¹ØÓÚÈÝÆ÷µÄ°üº­¹Øϵ
ºÜ¶àʱºò£¬ÓÈÆäÊÇÈÝÆ÷ÄÚÓÐƽÐв¼¾Ö£¬ÀýÈçÁ½¡¢Èý¸öfloatµÄdivʱ£¬¿í¶ÈºÜÈÝÒ׳öÏÖÎÊÌâ¡£ÔÚIEÖУ¬Íâ²ãµÄ¿í¶È»á±»ÄÚ²ã¸ü¿íµÄdiv¼·ÆÆ¡£Ò»¶¨ÒªÓÃPhotoshop»òÕßFireworkÁ¿È¡ÏñËؼ¶µÄ¾«¶È¡£
4¡¢¹ØÓڸ߶ȵÄÎÊÌâ
Èç¹ûÊǶ¯Ì¬µØÌí¼ÓÄÚÈÝ£¬¸ß¶È×îºÃ²»Òª¶¨Òå¡£ä¯ÀÀÆ÷¿ÉÒÔ×Ô¶¯ÉìËõ£¬È»¶øÈç¹ûÊǾ²Ì¬µÄÄÚÈÝ£¬¸ß¶È×îºÃ¶¨ºÃ¡££¨ËƺõÓÐʱºò²»»á×Ô¶¯Íùϳſª£¬²»ÖªµÀ¾ßÌåÔõô»ØÊ£©
5¡¢×îºÝµÄÊֶΠ– !important;
Èç¹ûʵÔÚûÓа취½â¾öһЩϸ½ÚÎÊÌâ,¿ÉÒÔÓÃÕâ¸ö·½·¨.FF¶ÔÓÚ”!important”»á×Ô¶¯ÓÅÏȽâÎö,È»¶øIEÔò»áºöÂÔ.ÈçÏÂ
.tabd1{
background:url(../../../..https://img.paonet.com/upload-images-old/res/images/up/tab1.gif) no-repeat 0px 0px !important;
background:url(../../../..https://img.paonet.com/upload-images-old/res/images/up/tab1.gif) no-repeat 1px 0px; }

ÖµµÃ×¢ÒâµÄÊÇ£¬Ò»¶¨Òª½«xxxx !important Õâ¾ä·ÅÖÃÔÚÁíÒ»¾äÖ®ÉÏ£¬ÉÏÃæÒѾ­Ìá¹ý