[ת]DIV+CSSÔÚIE7/IE6/Firefox¼äµÄ¼æÈÝÐÔÎÊÌâ
DIV£«CSSÍøÒ³²¼¾ÖÕâÊÇÒ»ÖÖÇ÷ÊÆ,ÎÒÒ²¿ªÊ¼Ë³Ó¦Õâ¹ÉÇ÷ÊÆÁË,²»¹ýÔÚʹÓÃDIV£«CSSÍøÕ¾Éè¼ÆµÄʱºò£¬Ó¦¸Ã×¢ÒâcssÑùʽ¼æÈݲ»Í¬ä¯ÀÀÆ÷ÎÊÌâ£¬ÌØ±ðÊǶÔÍêȫʹÓÃDIV+CSSÉè¼ÆµÄÍøÒ³£¬¾ÍÓ¦¸Ã¸ü×¢ÒâIE6 IE7 FF¶ÔCSSÑùʽµÄ¼æÈÝ£¬²»È»£¬ÄãµÄÍøÒ³¿ÉÄÜÂÒµÄÒ»ËúºýÍ¿£¡ÎÒ¾³£±»ÕâЩ¶«Î÷ÕûµÄ½¹Í·Àöî,ÓÚÊǺôÔÚÍøÉÏÕÒÁËЩ×ÊÁÏ,¼ÓÉÏ×Ô¼ºµÄÀí½âºÍÕâЩÈÕ×ӵľÑé,ÕûÀíÁËһЩ×ÊÁÏ,ÆäÖÐÓÐһЩÎÒ»¹Ã»Óõ½µÄºÍ»¹²»ÄÜÀí½âµÄ,¾ÍÖ±½Ó´Ó±ðµÄµØ·½¸øÕ³Á˹ýÀ´,²»ÖªµÀÓÐûÓдíÎó,µÈÎÒÒÔºóÓõ½µÄʱºòÂýÂý¸Ä°É,Ï£Íû¶Ô´ó¼ÒÓеã°ïÖú!
ʲôÊÇä¯ÀÀÆ÷¼æÈÝ£ºµ±ÎÒÃÇʹÓò»Í¬µÄä¯ÀÀÆ÷£¨Firefox IE7 IE6£©·ÃÎÊͬһ¸öÍøÕ¾£¬»òÕßÒ³ÃæµÄʱºò£¬»á³öÏÖһЩ²»¼æÈݵÄÎÊÌ⣬ÔÚÕâÖÖä¯ÀÀÆ÷ÏÂÏÔʾÕý³££¬ÔÚÁíÒ»ÖÖϾÍÂÒÁË£¬ÎÒÃÇÔÚ±àдCSSµÄʱºò»áºÜÄջ𣬸ÕÐÞ¸´ÁËÕâ¸öä¯ÀÀÆ÷µÄÎÊÌ⣬½á¹ûÁíÍâÒ»¸öä¯ÀÀÆ÷È´³öÁËÐÂÎÊÌâ¡£ºÃ°É£¬ÎÒ·þÁËÐаɣ¬ÄÇÎÒ¾ÍÀûÓÃÄãÃǵIJ»¼æÈݸ÷дһ¶Îcss,ÈÃËûÃǸ÷Ö´Ðи÷µÄ£¬ÕâÏÂ×ܸÃÄãÃ»Æ¢ÆøÁ˰ɣ¬ºÇºÇ¡£
ºÃÁË£¬ÑÔ¹éÕý´«
Ò»¡¢!important (¹¦ÄÜÓÐÏÞ)
Ëæ×ÅIE7¶Ô!importantµÄÖ§³Ö, !important ·½·¨ÏÖÔÚÖ»Õë¶ÔIE6µÄ¼æÈÝ.(×¢Òâд·¨.¼ÇµÃ¸ÃÉùÃ÷λÖÃÐèÒªÌáǰ.)
ÀýÈç:
ÒÔÏÂΪÒýÓõÄÄÚÈÝ£º
#example {
width: 100px !important; /* IE7+FF */
width: 200px; /* IE6 */
}
¶þ¡¢CSS HACKµÄ·½·¨(ÐÂÊÖ¿ÉÒÔ¿´¿´£¬¸ßÊ־͵±Â·¹ý°É)
Ê×ÏÈÐèÒªÖªµÀµÄÊÇ£º
ËùÓÐä¯ÀÀÆ÷ ͨÓà height: 100px;
IE6 רÓà _height: 100px;
IE7 רÓà *+height: 100px;
IE6¡¢IE7 ¹²ÓÃ *height: 100px;
IE7¡¢FF ¹²ÓÃ height: 100px !important;
ÀýÈ磺
ÒÔÏÂΪÒýÓõÄÄÚÈÝ£º
#example { height:100px; } /* FF */
* html #example { height:200px; } /* IE6 */
*+html #example { height:300px; } /* IE7 */
ÏÂÃæµÄÕâÖÖ·½·¨±È½Ï¼òµ¥
¾Ù¼¸¸öÀý×Ó£º
1¡¢IE6 - IE7+FF
ÒÔÏÂΪÒýÓõÄÄÚÈÝ£º
#example {
height:100px; /* FF+IE7 */
_height:200px; /* IE6 */
}
ÆäʵÕâ¸öÓÃÉÏÃæËµµÄµÚÒ»ÖÖ·½·¨Ò²¿ÉÒÔ
#example {
height:100px !important; /* FF+IE7 */
height:200px; /* IE6 */
}
2¡¢IE6+IE7 - FF
ÒÔÏÂΪÒýÓõÄÄÚÈÝ£º
#example {
height:100px; /* FF */
*height:200px; /* IE6+IE7 */
}
3¡¢IE6+FF - IE7
#example {
height:100px; /* IE6+FF */
*+height:200px; /* IE7 */
}
4¡¢IE6 IE7 FF ¸÷²»Ïàͬ
ÒÔÏÂΪÒýÓõ
Ïà¹ØÎĵµ£º
¹ØÓÚcursorµÄ˵Ã÷£¬ÊéÉÏÊÇÕâÑù½²µÄ£º
ÉèÖûò¼ìË÷ÔÚ¶ÔÏóÉÏÒÆ¶¯µÄÊó±êÖ¸Õë²ÉÓõĹâ±êÐÎ×´¡£
´ËÊôÐÔµÄÖµ¿ÉÒÔÊǶà¸ö£¬Æä¼äÓöººÅ·Ö¸ô¡£¼ÙÈçµÚÒ»¸öÖµ²»¿ÉÒÔ±»¿Í»§¶ËϵͳÀí½â»òËùÖ¸¶¨µÄ¹â±êÎÞ·¨ÕÒµ½¼°ÏÔʾ£¬ÔòµÚ¶þ¸öÖµ½«±»³¢ÊÔʹÓá£ÒÀ´ËÀàÍÆ¡£¼ÙÈçÈ«²¿Öµ¶¼²»¿ÉÓõϰ£¬Ôò´ËÊôÐÔ²»»á·¢Éú×÷Ó᣹ ......
ÊÕ²ØÒ»·Ý²»´íµÄDIV+CSS²¼¾ÖµÄSEOÓÅ»¯×ÊÁÏ£º
Div+cssÃüÃû¹æÔò-(ÄÜÔöÇ¿SEO?)
ҳͷ£ºheader
µÇ¼Ìõ£ºloginBar
±êÖ¾£ºlogo
²àÀ¸£ºsideBar
¹ã¸æ£ºbanner
µ¼º½£ºnav
×Óµ¼º½£ºsubNav
²Ëµ¥£ºmenu
×Ӳ˵¥£ºsubMenu
ËÑË÷£ºsearch
¹ö¶¯£ºscroll
Ò³ÃæÖ÷Ì壺main
ÄÚÈÝ£ºcontent
±êǩҳ£ºtab
ÎÄÕÂÁÐ±í£ºl ......
IE6ʵÏÖ·½·¨:
HTML²¿·Ö:
<imgsrc="..."alt="..."onload="resizeImage(this)"/>
JS²¿·Ö:
<mce:scripttype="text/javascript"><!--
functionresizeImage(obj){
obj.width=obj.width>50&&obj.width>obj.height?50:auto;
obj.height=obj.height>50?50:auto;
}
// -->&l ......
1.span µÄ overflow :hidden width:70px ; display:block(Ò»µãÒª¼ÓÉÏdivµÄ»°²»Óüӣ©
2.js¶¯Ì¬»»±³¾°,»»±³¾° style.backgroundImage = "url('images/bg1.jpg')";
3.ÓÃonFocus="this.blur()"À´Ïû³ýÁ´½ÓºóµÄ½¹µãÐéÏß¿ò
4. onMouseOver onMouseOut onClick Èý¸öʱ¼äÔÚÒ» ......
Èç¹ûÔÚÓÃCSSÉè¼Æ²¼¾ÖʱÓöµ½BUG£¬ÇëÈÏÕæÔĶÁÒÔÏÂÄÚÈÝ£¬·Ç³£ÈÝÒ×¼ÇÒäµÄ£¬²»ÖªµÀÄÄλ¸ßÈ˰ÑCSS BUG±à³ÉÁË˳¿ÚÁïÁË£¡¿´¿´ºÃ²»ºÃ¼ÇסĨ£¿ Ò»¡¢IE±ß¿òÈôÏÔÈôÎÞ£¬Ðë×¢Ò⣬¶¨ÊǸ߶ÈÉèÖÃÒÑÍü¼Ç£» ¶þ¡¢¸¡¶¯²úÉúÓÐÔµ¹Ê£¬ÈôÒª¸¸²ã°üº¬×¡£¬½ô¸ú¸¡¶¯ÒªÇå³ý£¬
Èç¹ûÔÚÓÃCSSÉè¼Æ²¼¾ÖʱÓöµ½BUG£¬ÇëÈÏÕæÔĶÁÒÔÏÂÄÚÈÝ£¬·Ç³£ÈÝÒ×¼ÇÒäµÄ£¬²»ÖªµÀÄ ......