IEºÍ»ðºüµÄcss¼æÈÝÐÔÎÊÌâ¹é×Ü
IEºÍ»ðºüµÄcss¼æÈÝÐÔÎÊÌâ¹é×Ü
¡¡¡¡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
ÌØ±ðÉèÖÃÑùʽ£¬ÖµµÃ×¢ÒâµÄÊÇ£¬Ò»¶¨Òª½«xxxx !important Õâ¾ä·ÅÖÃÔÚÁíÒ»¾äÖ®ÉÏ
¡¡¡¡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Ò»¶¨Òª±ÕºÏ¡£
Ïà¹ØÎĵµ£º
£¨1£© УÑéHTMLÎĵµ£¬È·±£Óï·¨ÎÞÎó
£¨2£© УÑéÿһ¸öcssÑùʽ±í
a) È·±£°ÑÊʵ±µÄ¶ÈÁ¿µ¥Î»·ÅÔÚ·ÇÁã³ß´çºó£¬²¢ÇÒÔÚµ¥Î»ºÍÊý×ÖÖ®¼äûÓпոñ
b) È·±£Ô ......
1.cssÔÚ²»Í¬ä¯ÀÀÆ÷ÏÂÏÔʾЧ¹û²»Í¬
firefoxºÍIE¶ÔijЩcssÑùʽµÄÈ϶¨Óв»ÉÙÇø±ð£¬°üÀ¨£º
· ulºÍolµÄĬÈÏpaddingÖµÊDz»Ò»ÑùµÄ£¬ÔÚFirefoxÖУ¬ ......
ËäÈ»CSSÑùʽµÄѧϰÐèÒªÎÒÃǶ¯ÊÖ¶àʵ¼ù£¬ÐèÒª¶à×ö°¸Àý£¬Ë¼ÖÂ˼¿¼£¬µ«ÓÐʱºò×¢Òâ×ÊÁϵÄÊÕ¼¯ÓëÕûÀíÒ²ÊǷdz£ÖØÒªµÄ£¬ÔÚʵ¼Ê¿ª·¢ÖÐÍùÍù»áÆðµ½Ê°빦±¶µÄЧ¹û¡£ÏÂÃæÒ»Ð©¹ØÓÚ°´Å¥¡¢Îı¾¿ò¡¢±íµ¥µÄ³£ÓÃCSSÑùʽ¡£´ó¼Ò¿ÉÒԲο¼¡£
Ò»¡¢°´Å¥Ñùʽ
.buttoncss {
font-family: "tahoma", "ËÎÌå" ......
IE6 IE7 IE8 Firefox Opera Google
·¶Àý
>
Y
Y
N
N
N
N
.type { >color: #F00; }
.
Y
Y
N
N
N
N
.type { .color: #F00; }
*
Y
Y
N
N
N
N
.type { *color: #F00; }
_
Y
N
N
N
N
N
.type { _color: #F00; }
!important
N
Y
Y
Y
......
ÓÃdiv+css½â¾öVS2005Öв¼¾ÖÄѵÄÎÊÌâ
Div+CSS²¼¾ÖÈëÃÅ½Ì³Ì ¡¶×ª×Ô À¶É«ÀíÏë http://www.blueidea.com/tech/site/2006/3574.asp¡·
Ò³Ãæ²¼¾ÖÓë¹æ»®
ÔÚÍøÒ³ÖÆ×÷ÖУ¬ÓÐÐí¶àµÄÊõÓÀýÈ磺CSS¡¢HTML¡¢DHTML¡¢XHTMLµÈµÈ¡£ÔÚÏÂÃæµÄÎÄÕÂÖÐÎÒÃǽ«»áÓõ½Ò»Ð©ÓйØÓÚHTMLµÄ»ù±¾ÖªÊ¶£¬¶øÔÚÄãѧϰÕâÆªÈëÃŽ̳Ì֮ǰ£¬ÇëÈ·¶¨ÄãÒѾ¾ßÓÐÁË ......