Ò׽ؽØÍ¼Èí¼þ¡¢µ¥Îļþ¡¢Ãâ°²×°¡¢´¿ÂÌÉ«¡¢½ö160KB

CSSä¯ÀÀÆ÷¼æÈÝÎÊÌâÕûÀí(IE6.0¡¢IE7.0 Óë FireFox)

Ô­ÎÄ:http://www.52css.com/article.asp?id=1026
 
´ÓÍøÉÏÊÕ¼¯ÁËIE7,6ÓëFireofxµÄ¼æÈÝÐÔ´¦Àí·½·¨²¢ÕûÀíÁËÒ»ÏÂ.
 
¶ÔÓÚweb2.0µÄ¹ý¶È,Ç뾡Á¿ÓÃxhtml¸ñʽд´úÂë,¶øÇÒDOCTYPE Ó°Ïì CSS ´¦Àí,×÷ΪW3CµÄ±ê×¼,Ò»¶¨Òª¼Ó DOCTYPEÉùÃ÷.
1.divµÄ´¹Ö±¾ÓÖÐÎÊÌâ  
vertical-align:middle; 
½«ÐоàÔö¼Óµ½ºÍÕû¸öDIVÒ»Ñù¸ß line-height:200px; 
È»ºó²åÈëÎÄ×Ö£¬¾Í´¹Ö±¾ÓÖÐÁË¡£È±µãÊÇÒª¿ØÖÆÄÚÈݲ»Òª»»ÐС£
2. margin¼Ó±¶µÄÎÊÌâ      
ÉèÖÃΪfloatµÄdivÔÚieÏÂÉèÖõÄmargin»á¼Ó±¶¡£ÕâÊÇÒ»¸öie6¶¼´æÔÚµÄbug¡£
½â¾ö·½°¸ÊÇÔÚÕâ¸ödivÀïÃæ¼ÓÉÏdisplay:inline;    
ÀýÈ磺
<#div id=”imfloat”>    
ÏàÓ¦µÄcssΪ    
#IamFloat
{
float:left; margin:5px;/*IEÏÂÀí½âΪ10px*/ 
display:inline;/*IEÏÂÔÙÀí½âΪ5px*/
}  
3.¸¡¶¯ie²úÉúµÄË«±¶¾àÀë      
#box{
float:left; width:100px; margin:0 0 0 100px; //ÕâÖÖÇé¿öÖ®ÏÂIE»á²úÉú200pxµÄ¾àÀë display:inline; //ʹ¸¡¶¯ºöÂÔ

ÕâÀïϸ˵һÏÂblockÓëinlineÁ½¸öÔªËØ£º
blockÔªËØµÄÌØµãÊÇ,×ÜÊÇÔÚÐÂÐÐÉÏ¿ªÊ¼,¸ß¶È,¿í¶È,Ðиß,±ß¾à¶¼¿ÉÒÔ¿ØÖÆ(¿éÔªËØ);
InlineÔªËØµÄÌØµãÊÇ,ºÍÆäËûÔªËØÔÚͬһÐÐÉÏ,²»¿É¿ØÖÆ(ÄÚÇ¶ÔªËØ);    
#box

display:block; //¿ÉÒÔΪÄÚÇ¶ÔªËØÄ£ÄâΪ¿éÔªËØ 
display:inline; //ʵÏÖͬһÐÐÅÅÁеÄЧ¹û 
diplay:table; 
}
4 IEÓë¿í¶ÈºÍ¸ß¶ÈµÄÎÊÌâ
IE ²»ÈϵÃmin-Õâ¸ö¶¨Ò壬µ«Êµ¼ÊÉÏËü°ÑÕý³£µÄwidthºÍheightµ±×÷ÓÐminµÄÇé¿öÀ´Ê¹¡£ÕâÑùÎÊÌâ¾Í´óÁË£¬Èç¹ûÖ»Óÿí¶ÈºÍ¸ß¶È£¬Õý³£µÄä¯ÀÀÆ÷ÀïÕâÁ½¸öÖµ¾Í²»»á±ä£¬Èç¹ûÖ»ÓÃmin-widthºÍmin-heightµÄ»°£¬IEÏÂÃæ¸ù±¾µÈÓÚûÓÐÉèÖÿí¶ÈºÍ¸ß¶È¡£    
±ÈÈçÒªÉèÖñ³¾°Í¼Æ¬£¬Õâ¸ö¿í¶ÈÊDZȽÏÖØÒªµÄ¡£
Òª½â¾öÕâ¸öÎÊÌ⣬¿ÉÒÔÕâÑù£º    
#box{ width: 80px; height: 35px;}
html>body #box

width: auto; height: auto; min-width: 80px; min-height: 35px;
}
5.Ò³ÃæµÄ×îС¿í¶È     
min -widthÊǸö·Ç³£·½±ãµÄCSSÃüÁËü¿ÉÒÔÖ¸¶¨ÔªËØ×îСҲ²»ÄÜСÓÚij¸ö¿í¶È£¬ÕâÑù¾ÍÄܱ£Ö¤ÅŰæÒ»Ö±ÕýÈ·¡£


Ïà¹ØÎĵµ£º

cssÖеÄborderÊôÐÔ

¡¡ÖÆ×÷¹ýÍøÒ³µÄÈ˶¼ÓÐΪ»­Ïß¶ø·³Äյľ­Àú£¬±¾ÎĽéÉܵÄС¼¼ÇÉÒ²Ðí¶ÔÄãÓÐËù°ïÖú¡£ÎÒÃÇÏÈÀ´ÈÏʶһÏ“Border”£¨»­±ß¿ò£©£¬ËüÊÇCSSµÄÒ»¸öÊôÐÔ£¬ÓÃËü¿ÉÒÔ¸øÄÜÈ·¶¨·¶Î§µÄHTML±ê¼Ç£¨ÈçTD¡¢DIVµÈµÈ£©»­±ß¿ò£¬Ëü¿ÉÒÔ¶¨Òå±ß¿òÏßµÄÀàÐÍ¡¢¿í¶ÈºÍÑÕÉ«£¬ÀûÓÃÕâ¸öÌØÐÔ£¬¿ÉÒÔÖÆ×÷Ò»Ð©ÌØÊâЧ¹û¡£ÏÂÃæ½«Í¨¹ýʵÀýÀ´ËµÃ÷ÆäÓ¦Óü¼ÇÉ¡£ ......

css µÄÃüÃû¹æ·¶

 Ò»£®ÎļþÃüÃû¹æ·¶
È«¾ÖÑùʽ£ºglobal.css£»
¿ò¼Ü²¼¾Ö£ºlayout.css£»
×ÖÌåÑùʽ£ºfont.css£»
Á´½ÓÑùʽ£ºlink.css£»
´òÓ¡Ñùʽ£ºprint.css£»
¶þ£®³£ÓÃÀà/IDÃüÃû¹æ·¶
Ò³¡¡Ã¼£ºheader
ÄÚ¡¡ÈÝ£ºcontent
ÈÝ¡¡Æ÷£ºcontainer
Ò³¡¡½Å£ºfooter
°æ¡¡È¨£ºcopyright¡¡
µ¼¡¡º½£ºmenu
Ö÷µ¼º½£ºmainMenu
×Óµ¼º½£ºsubMenu
......

(X)HTML+CSS¤Î¥Þー¥¯¥¢¥Ã¥×¥¬¥¤¥É¥é¥¤¥ó

1Äê¤Û¤Éǰ¤Ë×÷³É¤·¤¿¡¢(X)HTML¤ÈCSS¤Î¥Þー¥¯¥¢¥Ã¥×¥¬¥¤¥É¥é¥¤¥ó¤Ç¤¹¡£¥¢¥ë¥Ð¥¤¥ÈÏȤΥ¬¥¤¥É¥é¥¤¥ó²ß¶¨¤Î際¤Ë¡¢¥Õ¥¡ー¥¹¥È¥É¥é¥Õ¥È¤È¤·¤Æ¤Ä¤¯¤Ã¤¿¤â¤Î¤Ç¤¹¡£1Äꥢ¥Ã¥×¥Çー¥È¤·¤Æ¤¤¤Ê¤¤¤Î¤ÇÇé報¤â¹Å¤¤¤Ç¤¹¤·¡¢Ö±¤·¤¿¤¤¤È¤³¤í¤â¤¤¤¯¤Ä¤«¤¢¤ë¤Î¤Ç¤¹¤¬¡¢¤»¤Ã¤«¤¯¤Ê¤Î¤Ç¤³¤³¤Ë³ö¤·¤Æ¤ß¤Þ¤·¤¿¡£
......

CSS hack:Çø·ÖIE6£¬IE7£¬firefox

ת×Ô£ºhttp://www.div-css.com/html/XHTML-CSS/hack/1136667.html
Çø±ð²»Í¬ä¯ÀÀÆ÷£¬CSS hackд·¨£º
Çø±ðIE6
ÓëFF
£º
       background:orange
;*
background:blue
;
Çø±ðIE6
ÓëIE7
£º
       background:green
 !important
;background:blue
;
Çø±ðIE7
Ó ......

CSS Ñ¡ÔñÆ÷ÓÅÏȼ¶

CSSÓÅÏȼ¶°üº¬Ëĸö¼¶±ð£¨ÎÄÄÚÑ¡ÔñÆ÷£¬IDÑ¡ÔñÆ÷£¬ClassÑ¡ÔñÆ÷£¬ÔªËØÑ¡ÔñÆ÷£©ÒÔ¼°¸÷¼¶±ð³öÏֵĴÎÊý¡£¸ù¾ÝÕâËĸö¼¶±ð³öÏֵĴÎÊý¼ÆËãµÃµ½CSSµÄÓÅÏȼ¶¡£
CSSÓÅÏȼ¶µÄ¼ÆËã¹æÔòÈçÏ£º
* Ò³ÃæÖÐÖ±½ÓÉèÖÃstyle,¼Ó1,0,0,0
* ÿ¸öIDÑ¡ÔñÆ÷(Èç #id),¼Ó0,1,0,0
* ÿ¸öClassÑ¡ÔñÆ÷(Èç .class)¡¢Ã¿¸öÊôÐÔÑ¡ÔñÆ÷(Èç [attribute=])¡¢Ã¿¸ö ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ