CSSÖдæÔÚµÄBUG
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¸ö¿í¶È£¬ÕâÑù¾ÍÄܱ£Ö¤ÅÅ°æÒ»Ö±ÕýÈ·¡£µ«IE²»ÈϵÃÕâ¸ö£¬¶øËüʵ¼ÊÉÏ°Ñwidthµ±×ö×îС¿í¶ÈÀ´Ê¹¡£ÎªÁËÈÃÕâÒ»ÃüÁîÔÚIEÉÏÒ²ÄÜÓ㬿ÉÒÔ°ÑÒ»¸ö<div> ·Åµ½ <body> ±êÇ©Ï£¬È»ºóΪdivÖ¸¶¨Ò»¸öÀà, È»ºóCSSÕâÑùÉè¼Æ£º
#container{ min-width: 600px; width:e-xpression(document.body.clientWidth < 6
Ïà¹ØÎĵµ£º
Ò».ʹÓÃcssËõд
ʹÓÃËõд¿ÉÒÔ°ïÖú¼õÉÙÄãCSSÎļþµÄ´óС£¬¸ü¼ÓÈÝÒ×ÔĶÁ¡£cssËõдµÄÖ÷Òª¹æÔòÇë²Î¿´¡¶³£ÓÃcssËõдÓï·¨×ܽᡷ£¬ÕâÀï
¾Í²»Õ¹¿ªÃèÊö¡£
¶þ.Ã÷È·¶¨Ò嵥룬³ý·ÇֵΪ0
Íü¼Ç¶¨Òå³ß´çµÄµ¥Î»ÊÇCSSÐÂÊÖÆÕ±éµÄ´íÎó¡£ÔÚHTMLÖÐÄã¿ÉÒÔֻдwidth="100"£¬µ«ÊÇÔÚCSSÖУ¬Äã±ØÐë¸øÒ»¸ö׼ȷµÄµ¥
룬±ÈÈç:width: 100px width: ......
ÔÚµ±½ñweb2.0ʱ´ú,ÔÚÉè¼ÆÍøÒ³µÄʱºò´ó¼Ò¶¼»áʹÓÃdiv+css½øÐв¼¾Ö,Óеã¾Í²»Óöà˵ÁË,×ÔÈ»ÓкܶàºÃ´¦ÁË,ÖÁÉÙ»á±ÈÓÃtable²¼¾ÖÉÙЩ´úÂë,¶øÓÃdiv²¼¾ÖÒ²ÓÐËûÃǵIJ»·½±ãÖ®´¦,¾ÍÊDZȽϸ´ÔÓ,ÓÈÆäÊǶà¸ödivÔÚÒ»ÐÐÏÔʾ,¶à¸öä¯ÀÀÆ÷¼æÈݵȵÈ,ËùÒÔ³õѧÕß»¹ÊǾ¡Á¿ÓÃtable²¼¾Ö,´ýÊìÁ·ÁËÔÚÓÃdiv.
ÏÖÔÚ˵µÄÊÇDIV+CSSÖÐclear:bothµÄ×÷ÓÃ,ÏÈ¿´ ......
×î½ü,¾³£ÓÐÅóÓÑÎÊÎÒһЩ¹¤×÷ÖÐÓöµ½µÄCSSÎÊÌâ¡£ËûÃÇ×ÜÊDz»ÄܺܺõĿØÖÆCSS£¬Ó°ÏìCSSµÄЧÂÊ·¢»Ó¡£ÎÒÀ´·ÖÎö×ܽáһϴíÎóËùÔÚ£¬°ïÖú´ó¼Ò¸ü¼ÓÈÝÒ×ʹÓÃCSS¡£
±¾ÎÄ×ܽáÁËÎÒ¿ªÊ¼Ê¹ÓÃCSS²¼¾Ö·½·¨ÒÔÀ´ËùÓеļ¼ÇɺͼæÈÝ·½°¸£¬ÎÒÔ¸Òâ°ÑÕâЩÓëÄã·ÖÏí£¬ÎÒ»áÖصã½âÊÍһЩÐÂÊÖÈÝÒ×·¸µÄ´íÎó(°üÀ¨ÎÒ×Ô¼ºÒ²·¸¹ýµÄ)£¬Èç¹ûÄãÒѾÊÇCSS¸ßÊÖ£¬ÕâÐ ......
JavaScript´úÂë
<mce:script type="text/javascript"><!--
function imageOver(e) {
e.style.border="1px solid red";
}
function imageOut(e) {
e.style.borderWidth=0;
}
// --></mce:script>
<img src="phplamp.gif" onmouseover="imageOver(this)" onmo ......