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

CSS¼æÈÝIE6¡¢IE7¡¢»ðºü£¨Firefox£©¼¼Çɼ¯ºÏ


 CSS ¶Ôä¯ÀÀÆ÷µÄ¼æÈÝÐÔÓÐʱÈÃÈ˺ÜÍ·ÌÛ£¬»òÐíµ±ÄãÁ˽⵱Öеļ¼ÇɸúÔ­Àí£¬¾Í»á¾õµÃÒ²²»ÊÇÄÑÊ£¬´ÓÍøÉÏÊÕ¼¯ÁËIE7,6ÓëFireofxµÄ¼æÈÝÐÔ´¦Àí·½·¨²¢ÕûÀíÁË Ò»Ï¡£¶ÔÓÚweb2.0µÄ¹ý¶È£¬Ç뾡Á¿ÓÃxhtml¸ñʽд´úÂ룬¶øÇÒDOCTYPE Ó°Ïì CSS ´¦Àí£¬×÷ΪW3CµÄ±ê×¼£¬Ò»¶¨Òª¼Ó DOCTYPEÉùÃ÷¡£ 
 
CSS¼¼ÇÉ 
 
1.divµÄ´¹Ö±¾ÓÖÐÎÊÌâ 
 
vertical-align:middle; ½«ÐоàÔö¼Óµ½ºÍÕû¸öDIVÒ»Ñù¸ß line-height:200px; È»ºó²åÈëÎÄ×Ö£¬¾Í´¹Ö±¾ÓÖÐÁË¡£È±µãÊÇÒª¿ØÖÆÄÚÈݲ»Òª»»ÐР
 
2. margin¼Ó±¶µÄÎÊÌâ 
 
ÉèÖÃΪfloatµÄdivÔÚieÏÂÉèÖõÄmargin»á¼Ó±¶¡£ÕâÊÇÒ»¸öie6¶¼´æÔÚµÄbug¡£½â¾ö·½°¸ÊÇÔÚÕâ¸ödivÀïÃæ¼ÓÉÏdisplay:inline; 
ÀýÈ磺 
£¼#div id=”imfloat”> 
ÏàÓ¦µÄcssΪ 
#imfloat{ 
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¸ö¿í¶È£¬ÕâÑù¾ÍÄܱ£Ö¤ÅÅ°æÒ»Ö±ÕýÈ·¡£µ«IE²»ÈϵÃÕâ¸ö£¬¶øËüʵ¼ÊÉÏ°Ñ widthµ±×ö×îС¿í¶ÈÀ´Ê¹¡£ÎªÁËÈÃÕâÒ»ÃüÁîÔÚIEÉÏÒ²ÄÜÓ㬿ÉÒÔ°ÑÒ»¸ö£¼div> ·Åµ½ £¼body> ±êÇ©Ï£¬È»ºóΪdivÖ


Ïà¹ØÎĵµ£º

CSS½â¾öDIV´¹Ö±¾ÓÖеÄÎÊÌâ

ÔÚ˵µ½Õâ¸öÎÊÌâµÄʱºò£¬Ò²ÐíÓÐÈË»áÎÊCSSÖв»ÊÇÓÐvertical-alignÊôÐÔÀ´ÉèÖô¹Ö±¾ÓÖеÄÂ𣿼´Ê¹ÊÇijЩä¯ÀÀÆ÷²»Ö§³ÖÎÒÖ»Ðè×öÉÙÐíµÄCSS Hack¼¼Êõ¾Í¿ÉÒÔ°¡£¡ËùÒÔÔÚÕâÀïÎÒ»¹Òª啰àÂÁ½¾ä£¬CSSÖеÄÈ·ÊÇÓÐvertical-alignÊôÐÔ£¬µ«ÊÇËüÖ»¶Ô(X)HTMLÔªËØÖÐÓµÓÐvalignÌØÐÔµÄÔªËزÅÉúЧ£¬ÀýÈç±í¸ñÔªËØÖеģ¼td£¾¡¢£¼th£¾¡¢£¼caption£¾ ......

¹ØÓÚ±íµ¥°´Å¥µÄcssÑùʽ´óÈ«

°´Å¥Ñùʽ*/
.ButtonCss {}{
    font-family: "Tahoma", "ËÎÌå";
    font-size:9pt; color: #003399;
    border: 1px #003399 solid;
    color:006699;
    BORDER-BOTTOM: #93bee2 1px solid;
    BORDER-LEFT: #9 ......

CSS Ñùʽ

ÑùʽӦÓõij¡ºÏµ±È»ÊÇÍøÒ³ÎļþÖУ¬µ«ÊÇÈçºÎÈ¥ÔËÓÃÄØ£¿¿ÉÒÔ¼òµ¥µÄÕûÀíÒ»ÏÂ˼·¡£
selector ÓÐÈýÖÖÇé¿ö£¬ÄÚ²¿Ñùʽ£¬ÍⲿÑùʽ£¬ÄÚÁªÑùʽ¡£Ó﷨Ϊ
Selector { property: value }
¿ÉÒÔͨ¹ýÉèÖñêÇ©µÄstyleÊôÐÔÖÐÊéд£¬Í¨¹ýCLASSºÍIDÀ´¶¨Òå¡£
<link rel=stylesheet href="***/**.css" type="text/css">
ÈýÖÖ·½Ê½µÄÔËÓ ......

IE6/IE7/FFµÄCSS hack ä¯ÀÀÆ÷¼æÈÝ×ܽá

IE6/IE7/FFµÄCSS hack ä¯ÀÀÆ÷¼æÈÝ×ܽá
2010-01-23 15:25
ÓÉÓÚ²»Í¬µÄä¯ÀÀÆ÷¶ÔCSSµÄÖ§³Ö¼°½âÎö½á¹û²»Ò»Ñù£¬´¦ÀíµÄÓÅÏȼ¶²»Ò»Ñù¡£Õë¶Ô²»Í¬µÄä¯ÀÀÆ÷À´Ð´²»Í¬µÄCSS´ïµ½ÔÚ²»Í¬ä¯ÀÀÆ÷ÏÂÏÔʾÏëÒªµÄЧ¹û¾ÍÊÇcss hack¡£ÏÈÌùÁ½¸öÖ±¹ÛµÄ¶Ô±Èͼ£º
ÔÙÌùÒ»¶Î´úÂ룺
#bgcolor {
background:red !important; /* Firefox µÈÆäËûä¯ÀÀÆ÷ * ......

¸÷ä¯ÀÀÆ÷רÊôCSS HACK:FIREFOX/OPERA/SAFARI/IE

CSS Hack ÊÇÔÚ±ê×¼ CSS û°ì·¨¼æÈݸ÷ä¯ÀÀÆ÷ÏÔʾЧ¹ûʱ²Å»áÓÃÉϵIJ¹¾È·½·¨,ÔÚ¸÷ä¯ÀÀÆ÷³§É̽âÎö CSS ûÓдï³ÉÒ»ÖÂÇ°,ÎÒÃÇÖ»ÄÜÓÃÕâÑùµÄ·½·¨À´Íê³ÉÕâÑùµÄÈÎÎñ¡£ÍøÉÏÄã¿ÉÄÜÄÜËÑË÷µ½Ò»´ó¶ÑµÄ CSS Hack£¬µ«ÊÇÎÒ½ñÌì·¢²¼µÄÄã¿ÉÄܲ¢²»¶¼ºÜÁ˽⣬ÒòΪÕâЩ¶¼ÊÇÖ»Õë¶Ôµ¥¶ÀÒ»¸öä¯ÀÀÆ÷µÄ CSS Hack¡£
ΪÁËÏòÄãչʾÕâЩ CSS Hack ÊÇ·ñÕý³£Ô ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØͼ | ¸ÓICP±¸09004571ºÅ