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Ôõô×öÏÂÀ²Ëµ¥£¬Ö®Ç°¿´µ½µÄÏÂÀ²Ëµ¥¶¼ÊÇÓÃjs×öµÄ£¬¿ÉÊÇÓÖ²»¶®js£¬½ñÌìÖÕÓÚÓÃcssÑо¿³öÀ´ÁË£¬´ó¼ÒÖ¸½ÌÖ¸½Ì¡£
ÏÂÃæµÄ´úÂëÖ±½Ó¿¼Á˾ÍÐС£
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org ......
¡¡ÖÆ×÷¹ýÍøÒ³µÄÈ˶¼ÓÐΪ»Ï߶ø·³ÄյľÀú£¬±¾ÎĽéÉܵÄС¼¼ÇÉÒ²Ðí¶ÔÄãÓÐËù°ïÖú¡£ÎÒÃÇÏÈÀ´ÈÏʶһÏ“Border”£¨»±ß¿ò£©£¬ËüÊÇCSSµÄÒ»¸öÊôÐÔ£¬ÓÃËü¿ÉÒÔ¸øÄÜÈ·¶¨·¶Î§µÄHTML±ê¼Ç£¨ÈçTD¡¢DIVµÈµÈ£©»±ß¿ò£¬Ëü¿ÉÒÔ¶¨Òå±ß¿òÏßµÄÀàÐÍ¡¢¿í¶ÈºÍÑÕÉ«£¬ÀûÓÃÕâ¸öÌØÐÔ£¬¿ÉÒÔÖÆ×÷һЩÌØÊâЧ¹û¡£ÏÂÃ潫ͨ¹ýʵÀýÀ´ËµÃ÷ÆäÓ¦Óü¼ÇÉ¡£ ......
Çø±ðIE6ÓëFF£º
background:orange;*background:blue;
Çø±ðIE6ÓëIE7£º
background:green !important;background:blue;
Çø±ðIE7ÓëFF£º
background:orange; *background:green;
Çø±ðFF£¬IE7£¬IE6£º
  ......
Åöµ½ºÃЩÎÊÌ⣬FirefoxÏÂÃæ¿´×źÜÍêÃÀ£¬ie6ÏÂÃæ¾Í²Ò²»È̶㬻¹ºÃ£¬Ò»µãµãÂýÂý½â¾öÁË¡£Ò»Ð©¶«Î÷ժ¼һÏ£¬ÒÔºóÒ²ÐíÓõõ½¡£
DIV+CSS½â¾öIE6£¬IE7£¬IE8£¬FF¼æÈÝÎÊÌâ
ÄÇÎÒÀ´ËµËµ°É£¬×öÁ˼¸ÄêµÄDIV+CSS£¬Ò²»ýÀÛÁ˲»ÉÙ½â¾ö¼æÈÝÎÊÌâµÄ·½·¨£¬ÎÒÕâÀïֻ˵ÏÖÔÚÖ÷Á÷µÄ¼¸¸ö£¬£¨IE6£¬IE7£¬IE8£¬FF£©ÆäËüµÄûȥÑо¿¹ý
1.ie8ϼæÈÝÎÊÌ⣠......
CSS¼æÈÝÐÔÒ»Ö±ÊÇ´ó¼ÒÍ·ÌÛµÄÎÊÌ⣬ÏÖÔÚ˵˵ÈçºÎÇø·ÖÕ⼸¸öä¯ÀÀÆ÷£¬IE6¡¢IE7¡¢IE8ºÍFF£¬IE8¾ùÖ¸IE8Õýʽ°æ,°æ±¾ºÅ:8.0.6001.18702¡£
ÒÔÑÕɫΪÀýÀ´ËµÈçºÎÇø·ÖÕ⼸¸öä¯ÀÀÆ÷£º
.csshack{
color:#f00; &nbs ......