Ò׽ؽØÍ¼Èí¼þ¡¢µ¥Îļþ¡¢Ãâ°²×°¡¢´¿ÂÌÉ«¡¢½ö160KB

[ת]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 ¸÷²»Ïàͬ
ÒÔÏÂΪÒýÓõ


Ïà¹ØÎĵµ£º

CSS CookbookÀý×Ó£º´´½¨Ë®Æ½µ¼º½²Ëµ¥


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css"><!--
#navsite h5 {
display: none
}
#navsite ul {
......

css¿ØÖÆÍ¼Æ¬°´±ÈÀýËõС

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 ......

Internet Explorer CSS hacks

²âÊÔ»·¾³£ºIE6 , IE7, IE8, FF3.0 
±í´ï·½Ê½£º±í´ï·½Ê½£º 
body { `background:red } 
body { ~background:red } 
body { !background:red } 
body { @background:red } 
body { #background:red } 
body { $background:red } 
body { %background:red } 
body { ^b ......

css¶¨¿í,js»»±³¾°£¬È¥Á´½ÓºóµÄ½¹µãÐéÏß¿ò£¬

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  Èý¸öʱ¼äÔÚÒ» ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ