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¸ö¿í¶È£¬ÕâÑù¾ÍÄܱ£Ö¤ÅŰæÒ»Ö±ÕýÈ·¡£
Ïà¹ØÎĵµ£º
¡¡ÖÆ×÷¹ýÍøÒ³µÄÈ˶¼ÓÐΪ»Ïß¶ø·³ÄյľÀú£¬±¾ÎĽéÉܵÄС¼¼ÇÉÒ²Ðí¶ÔÄãÓÐËù°ïÖú¡£ÎÒÃÇÏÈÀ´ÈÏʶһÏ“Border”£¨»±ß¿ò£©£¬ËüÊÇCSSµÄÒ»¸öÊôÐÔ£¬ÓÃËü¿ÉÒÔ¸øÄÜÈ·¶¨·¶Î§µÄHTML±ê¼Ç£¨ÈçTD¡¢DIVµÈµÈ£©»±ß¿ò£¬Ëü¿ÉÒÔ¶¨Òå±ß¿òÏßµÄÀàÐÍ¡¢¿í¶ÈºÍÑÕÉ«£¬ÀûÓÃÕâ¸öÌØÐÔ£¬¿ÉÒÔÖÆ×÷Ò»Ð©ÌØÊâЧ¹û¡£ÏÂÃæ½«Í¨¹ýʵÀýÀ´ËµÃ÷ÆäÓ¦Óü¼ÇÉ¡£ ......
Ò»£®ÎļþÃüÃû¹æ·¶
È«¾ÖÑùʽ£ºglobal.css£»
¿ò¼Ü²¼¾Ö£ºlayout.css£»
×ÖÌåÑùʽ£ºfont.css£»
Á´½ÓÑùʽ£ºlink.css£»
´òÓ¡Ñùʽ£ºprint.css£»
¶þ£®³£ÓÃÀà/IDÃüÃû¹æ·¶
Ò³¡¡Ã¼£ºheader
ÄÚ¡¡ÈÝ£ºcontent
ÈÝ¡¡Æ÷£ºcontainer
Ò³¡¡½Å£ºfooter
°æ¡¡È¨£ºcopyright¡¡
µ¼¡¡º½£ºmenu
Ö÷µ¼º½£ºmainMenu
×Óµ¼º½£ºsubMenu
......
ÍøÕ¾±äºÚ»ÒÉ«CSSÂ˾µ´úÂë
Òý×Ô:http://edu.seuuo.com/html/81/n-12181.html
Ϊ·½±ãÕ¾µã°§µ¿£¬ÌØÌṩcssÂ˾µ´úÂ룬ÒÔ±í°§µ¿¡£ÒÔÏÂΪȫվCSS´úÂë¡£
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
ʹÓ÷½·¨£ºÕâ¶Î´úÂë¿ÉÒÔ±äÍøÒ³ÎªºÚ°×£¬½«´úÂë¼Óµ½CSS×î¶¥¶Ë¾Í¿ÉÒÔʵÏÖËØ×°¡£½¨ÒéÈ«¹úÕ¾³¤¶¯ ......
Ñ¡ÔñÆ÷ Óï·¨ ÃèÊö ʾÀý ±êǩѡÔñÆ÷ E{ .....} ÒÔÎĵµÔªËØ×÷ΪѡÔñ·û td{font-size:14px;
......} IDÑ¡ÔñÆ÷ #ID{...} ÒÔÎĵµÔªËصÄΩһ± ......
Ò»¡¢CSS Ö㤶ÈÓëÑÕÉ«
1¡¢³¤¶Èµ¥Î»ËµÃ÷
in Ó¢´ç
cm ¹«·Ö
mm ¹«Àï
cm ÒÔĿǰ×ÖÌå¸ß¶ÈΪµ¥Î»
ex ÒÔСд×Öĸ¸ß¶ÈΪµ¥Î»£¨´ó²¿·Ö²»Ö§³Ö£©
pt 1pt/72Ó¢´ç
pc 1pc/12pt
px ÏñËØ£¨ÍƼöʹÓã©
2¡¢ÑÕÉ«µ¥Î»£º ˵Ã÷
Ê®Áù½øÖÆÈ磺color:#ff0000
ÑÕÉ«Ãû³ÆÈ磺color:red
ÈýÔÉ«µ¥Î»È磺rgb(255,0,0)
Ò»°ã×î³£ÓõÄÊÇÊ®Áù½øÖ ......