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Öв»ÊÇÓÐvertical-alignÊôÐÔÀ´ÉèÖô¹Ö±¾ÓÖеÄÂ𣿼´Ê¹ÊÇijЩä¯ÀÀÆ÷²»Ö§³ÖÎÒÖ»Ðè×öÉÙÐíµÄCSS Hack¼¼Êõ¾Í¿ÉÒÔ°¡£¡ËùÒÔÔÚÕâÀïÎÒ»¹Òª啰àÂÁ½¾ä£¬CSSÖеÄÈ·ÊÇÓÐvertical-alignÊôÐÔ£¬µ«ÊÇËüÖ»¶Ô(X)HTMLÔªËØÖÐÓµÓÐvalignÌØÐÔµÄÔªËزÅÉúЧ£¬ÀýÈç±í¸ñÔªËØÖеģ¼td£¾¡¢£¼th£¾¡¢£¼caption£¾ ......
°´Å¥Ñùʽ*/
.ButtonCss {}{
font-family: "Tahoma", "ËÎÌå";
font-size:9pt; color: #003399;
border: 1px #003399 solid;
color:006699;
BORDER-BOTTOM: #93bee2 1px solid;
BORDER-LEFT: #9 ......
ÑùʽӦÓõij¡ºÏµ±È»ÊÇÍøÒ³ÎļþÖУ¬µ«ÊÇÈçºÎÈ¥ÔËÓÃÄØ£¿¿ÉÒÔ¼òµ¥µÄÕûÀíÒ»ÏÂ˼·¡£
selector ÓÐÈýÖÖÇé¿ö£¬ÄÚ²¿Ñùʽ£¬ÍⲿÑùʽ£¬ÄÚÁªÑùʽ¡£Ó﷨Ϊ
Selector { property: value }
¿ÉÒÔͨ¹ýÉèÖñêÇ©µÄstyleÊôÐÔÖÐÊéд£¬Í¨¹ýCLASSºÍIDÀ´¶¨Òå¡£
<link rel=stylesheet href="***/**.css" type="text/css">
ÈýÖÖ·½Ê½µÄÔËÓ ......
IE6/IE7/FFµÄCSS hack ä¯ÀÀÆ÷¼æÈÝ×ܽá
2010-01-23 15:25
ÓÉÓÚ²»Í¬µÄä¯ÀÀÆ÷¶ÔCSSµÄÖ§³Ö¼°½âÎö½á¹û²»Ò»Ñù£¬´¦ÀíµÄÓÅÏȼ¶²»Ò»Ñù¡£Õë¶Ô²»Í¬µÄä¯ÀÀÆ÷À´Ð´²»Í¬µÄCSS´ïµ½ÔÚ²»Í¬ä¯ÀÀÆ÷ÏÂÏÔʾÏëÒªµÄЧ¹û¾ÍÊÇcss hack¡£ÏÈÌùÁ½¸öÖ±¹ÛµÄ¶Ô±Èͼ£º
ÔÙÌùÒ»¶Î´úÂ룺
#bgcolor {
background:red !important; /* Firefox µÈÆäËûä¯ÀÀÆ÷ * ......
CSS Hack ÊÇÔÚ±ê×¼ CSS û°ì·¨¼æÈݸ÷ä¯ÀÀÆ÷ÏÔʾЧ¹ûʱ²Å»áÓÃÉϵIJ¹¾È·½·¨,ÔÚ¸÷ä¯ÀÀÆ÷³§É̽âÎö CSS ûÓдï³ÉÒ»ÖÂÇ°,ÎÒÃÇÖ»ÄÜÓÃÕâÑùµÄ·½·¨À´Íê³ÉÕâÑùµÄÈÎÎñ¡£ÍøÉÏÄã¿ÉÄÜÄÜËÑË÷µ½Ò»´ó¶ÑµÄ CSS Hack£¬µ«ÊÇÎÒ½ñÌì·¢²¼µÄÄã¿ÉÄܲ¢²»¶¼ºÜÁ˽⣬ÒòΪÕâЩ¶¼ÊÇÖ»Õë¶Ôµ¥¶ÀÒ»¸öä¯ÀÀÆ÷µÄ CSS Hack¡£
ΪÁËÏòÄãչʾÕâЩ CSS Hack ÊÇ·ñÕý³£Ô ......