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

DIV+CSSÉè¼ÆÊ±ä¯ÀÀÆ÷¼æÈÝÐÔÎÊÌâ

ÔÚÕâÖÖä¯ÀÀÆ÷ÏÂÏÔʾÕý³££¬ÔÚÁíÒ»ÖÖϾÍÂÒÁË£¬ÎÒÃÇÔÚ±àдCSSµÄʱºò»áºÜÄջ𣬸ÕÐÞ¸´ÁËÕâ¸öä¯ÀÀÆ÷µÄÎÊÌ⣬½á¹ûÁíÍâÒ»¸öä¯ÀÀÆ÷È´³öÁËÐÂÎÊÌâ¡£

-
  
ʲôÊÇä¯ÀÀÆ÷¼æÈÝ£ºµ±ÎÒÃÇʹÓò»Í¬µÄä¯ÀÀÆ÷£¨Firefox IE7
IE6£©·ÃÎÊͬһ¸öÍøÕ¾£¬»òÕßÒ³ÃæµÄʱºò£¬»á³öÏÖһЩ²»¼æÈݵÄÎÊÌ⣬ÔÚÕâÖÖä¯ÀÀÆ÷ÏÂÏÔʾÕý³££¬ÔÚÁíÒ»ÖÖϾÍÂÒÁË£¬ÎÒÃÇÔÚ±àдCSSµÄʱºò»áºÜÄջ𣬸ÕÐÞ¸´
ÁËÕâ¸öä¯ÀÀÆ÷µÄÎÊÌ⣬½á¹ûÁíÍâÒ»¸öä¯ÀÀÆ÷È´³öÁËÐÂÎÊÌâ¡£ºÃ°É£¬ÎÒ·þÁËÐаɣ¬ÄÇÎÒ¾ÍÀûÓÃÄãÃǵIJ»¼æÈݸ÷дһ¶Îcss,ÈÃËûÃǸ÷Ö´Ðи÷µÄ£¬ºÇºÇ¡£ 
Ò»¡¢!important (¹¦ÄÜÓÐÏÞ) 
Ëæ×ÅIE7¶Ô!importantµÄÖ§³Ö, !important ·½·¨ÏÖÔÚÖ»Õë¶ÔIE6µÄ¼æÈÝ.(×¢Òâд·¨.¼ÇµÃ¸ÃÉùÃ÷λÖÃÐèÒªÌáǰ.) 
ÀýÈç: 
#example { 
width: 100px !important; /* IE7+FF */ 
width: 200px; /* IE6 */ 

¶þ¡¢CSS HACKµÄ·½·¨(ÐÂÊÖ¿ÉÒÔ¿´¿´£¬¸ßÊ־͵±Â·¹ý°É) 
Ê×ÏÈÐèÒªÖªµÀµÄÊÇ£º 
ËùÓÐä¯ÀÀÆ÷ ͨÓà height: 100px; 
IE6 רÓà _height: 100px; 
IE7 רÓà *+height: 100px; 
IE6¡¢IE7 ¹²ÓÃ *height: 100px; 
IE7¡¢FF ¹²ÓÃ height: 100px !important; 
ÀýÈ磺 
#example { height:100px; } /* FF */ 
* html #example { height:200px; } /* IE6 */ 
*+html #example { height:300px; } /* IE7 */ 
ÏÂÃæµÄÕâÖÖ·½·¨±È½Ï¼òµ¥ 
¾Ù¼¸¸öÀý×Ó£º 
1¡¢IE6 - IE7+FF 
#example { 
height:100px; /* FF+IE7 */ 
_height:200px; /* IE6 */ 

ÆäʵÕâ¸öÓÃÉÏÃæËµµÄµÚÒ»ÖÖ·½·¨Ò²¿ÉÒÔ 
#example { 
height:100px !important; /* FF+IE7 */ 
height:200px; /* IE6 */ 

2¡¢IE6+IE7 - FF 
#example { 
height:100px; /* FF */ 
*height:200px; /* IE6+IE7 */ 

3¡¢IE6+FF - IE7 
#example { 
height:100px; /* IE6+FF */ 
*+height:200px; /* IE7 */ 

4¡¢IE6 IE7 FF ¸÷²»Ïàͬ 
#example { 
height:100px; /* FF */ 
_height:200px; /* IE6 */ 
*+height:300px; /* IE7 */ 

»ò£º 
#example { 
height:100px; /* FF */ 
*height:300px; /* IE7 */ 
_heigh


Ïà¹ØÎĵµ£º

CSSÔÚÏßÓÅ»¯

×î½üÔÚÍøÉÏÕÒµ½Á˼¸¿îCSSÔÚÏßÓÅ»¯Æ÷£¬×Ô¼ºÊÔÁËÊÔ£¬·ÅÉÏÀ´¸ú´ó¼Ò·ÖÏíһϡ£
1. Online CSS Optimizer /ÔÚÏßCSSÓÅ»¯
¸ÃÔÚÏß¹¤¾ßÓÃÓÚ¾«¼òºÍѹËõÑùʽ±íµÄÎļþ´óС£¬ÓÅ»¯ºóµÄ´úÂ뽫ÍêÈ«ÊÇ»ìÂҵģ¬Ö§³ÖÊäÈëURL£¬Ìá½»ÎļþºÍÖ±½ÓÊäÈë½øÐÐѹËõ¡£
2. CSS Compressor/CSSѹËõ
×÷ÓÃͬÉÏ£¬µ«Õâ¸ö¹¤¾ßÓµÓзdz£ÏêϸµÄѹËõÑ¡ÏËü°üº¬» ......

È«Ãæ¼æÈÝIE6/IE7/IE8/FFµÄCSS HACKд·¨

margin-bottom:40px;       /*ffµÄÊôÐÔ*/
margin-bottom:140px\9;    /* IE6/7/8µÄÊôÐÔ */
color:red\0;              /* IE8Ö§³Ö */
*margin-bottom:450px;     /*IE6/7µÄÊôÐÔ*/ ......

CSS¹«ÓÃÎļþ

ÓÉÓÚ¸÷ä¯ÀÀÆ÷µÄĬÈÏCSSÑùʽ²»Ò»Ñù£¬ÎÒÃDZØÐëдһ¸öCSS ResetͳһÆðÀ´¡£
ͨ³£ÎÒµÄ×ö·¨ÊÇÔÚcommon.cssÀïдȫ¾Ö¿ØÖÆ£¬ÕâÀïÃæÒ²°üÀ¨headerºÍfooter£¬ÆäËüCSSÎļþ¾Íͨ¹ý@import url(”common.css”);ÒýÓá£
body{padding:10px;margin:0;background:#fff;font-size:12px;line-height:14px;color:#333;font-family:Ari ......

IE8 ²»Ö§³ÖCSS word wrapÊôÐÔ

     µ±Á¬ÐøÊäÈëÓ¢Óï×Ö·ûºó£¬ÓÉÓÚä¯ÀÀÆ÷ĬÈÏΪһ¸öµ¥´Ê£¬²¢²»»á»»Ðд¦Àí£¬ÔÚIE6/IE7 ÖУ¬ÎÒÃÇ¿ÉÒÔÌí¼ÓcssÖеÄword-wrap ÊôÐÔ£¬ÊµÏÖ×Ô¶¯»»ÐС£µ«ÊÇÔÚIE8 °æ±¾ÖУ¬¸ÃÊôÐÔ²»Ö§³Ö¡£
     ÎÒÃÇ¿ÉÒÔ²ÉÓÃÅжÏä¯ÀÀÆ÷°æ±¾ºó£¬Ê¹ÓÃJavaScript½øÐл»ÐС£
     if ($.br ......

CSSÍøÒ³²¼¾Öʱ³£·¸µÄ¼¸ÖÖС´íÎó

CSSÍøÒ³²¼¾Öʱ³£·¸µÄ¼¸ÖÖС´íÎó£º
¡¡¡¡1. ¼ì²éHTMLÔªËØÊÇ·ñÓÐÆ´Ð´´íÎó¡¢ÊÇ·ñÍü¼Ç½áÊø±ê¼Ç
¡¡¡¡¼´Ê¹ÊÇÀÏÊÖÒ²¾­³£»áŪ´ídivµÄǶÌ×¹ØÏµ¡£¿ÉÒÔÓÃdreamweaverµÄÑéÖ¤¹¦Äܼì²éÒ»ÏÂÓÐÎÞ´íÎó¡£
¡¡¡¡2. ¼ì²éCSSÊÇ·ñÊéдÕýÈ·
¡¡¡¡¼ì²éÒ»ÏÂÓÐÎÞÆ´Ð´´íÎó¡¢ÊÇ·ñÍü¼Ç½áβµÄ } µÈ¡£¿ÉÒÔÀûÓÃCleanCSSÀ´¼ì²é CSS ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ