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

IE6.0¡¢IE7.0 ÓëFireFox CSS¼æÈݵĽâ¾ö·½·¨


IE6.0¡¢IE7.0 ÓëFireFox CSS¼æÈݵĽâ¾ö·½·¨
2009-04-29 14:51
1.DOCTYPE Ó°Ïì CSS ´¦Àí
2.FF: div ÉèÖà margin-left, margin-right Ϊ auto ʱÒѾ­¾ÓÖÐ, IE ²»ÐÐ
3.FF: body ÉèÖà text-align ʱ, div ÐèÒªÉèÖà margin: auto(Ö÷ÒªÊÇ margin-left,margin-right) ·½¿É¾ÓÖÐ
4.FF: ÉèÖà padding ºó, div »áÔö¼Ó height ºÍ width, µ« IE ²»»á, ¹ÊÐèÒªÓà !important ¶àÉèÒ»¸ö height ºÍ width
5.FF: Ö§³Ö !important, IE ÔòºöÂÔ, ¿ÉÓà !important Ϊ FF ÌØ±ðÉèÖÃÑùʽ
6.div µÄ´¹Ö±¾ÓÖÐÎÊÌâ: vertical-align:middle; ½«ÐоàÔö¼Óµ½ºÍÕû¸öDIVÒ»Ñù¸ß line-height:200px; È»ºó²åÈëÎÄ×Ö£¬¾Í´¹Ö±¾ÓÖÐÁË¡£È±µãÊÇÒª¿ØÖÆÄÚÈݲ»Òª»»ÐÐ
7.cursor: pointer ¿ÉÒÔͬʱÔÚ IE FF ÖÐÏÔʾÓαêÊÖָ״£¬ hand ½ö IE ¿ÉÒÔ
8.FF: Á´½Ó¼Ó±ß¿òºÍ±³¾°É«£¬ÐèÉèÖà display: block, ͬʱÉèÖà float: left ±£Ö¤²»»»ÐС£²ÎÕÕ menubar, ¸ø a ºÍ menubar ÉèÖø߶ÈÊÇΪÁ˱ÜÃâµ×±ßÏÔʾ´íλ, Èô²»Éè height, ¿ÉÒÔÔÚ menubar ÖвåÈëÒ»¸ö¿Õ¸ñ¡£
9.ÔÚmozilla firefoxºÍIEÖеÄBOXÄ£ÐͽâÊͲ»Ò»Öµ¼ÖÂÏà²î2px½â¾ö·½·¨£º div{margin:30px!important;margin:28px;}×¢ÒâÕâÁ½¸ömarginµÄ˳ÐòÒ»¶¨²»ÄÜд·´£¬¾Ý°¢½ÝµÄ˵·¨! importantÕâ¸öÊôÐÔIE²»ÄÜʶ±ð£¬µ«±ðµÄä¯ÀÀÆ÷¿ÉÒÔʶ±ð¡£ËùÒÔÔÚIEÏÂÆäʵ½âÊͳÉÕâÑù£º div{maring:30px;margin:28px}ÖØ¸´¶¨ÒåµÄ»°°´ÕÕ×îºóÒ»¸öÀ´Ö´ÐУ¬ËùÒÔ²»¿ÉÒÔֻдmargin:XXpx! important;
11.ul±êÇ©ÔÚMozillaÖÐĬÈÏÊÇÓÐpaddingÖµµÄ,¶øÔÚIEÖÐÖ»ÓÐmarginÓÐÖµËùÒÔÏȶ¨Òå ul{margin:0;padding:0;}¾ÍÄܽâ¾ö´ó²¿·ÖÎÊÌâ
×¢ÒâÊÂÏ
1¡¢floatµÄdivÒ»¶¨Òª±ÕºÏ¡£
ÀýÈ磺(ÆäÖÐfloatA¡¢floatBµÄÊôÐÔÒѾ­ÉèÖÃΪfloat:left;) <#div id=”floatA” ></#div>
<#div id=”floatB” ></#div>
<#div id=”NOTfloatC” ></#div>ÕâÀïµÄNOTfloatC²¢²»Ï£Íû¼ÌÐøÆ½ÒÆ£¬¶øÊÇÏ£ÍûÍùÏÂÅÅ¡£
Õâ¶Î´úÂëÔÚIEÖкÁÎÞÎÊÌ⣬ÎÊÌâ³öÔÚFF¡£Ô­ÒòÊÇNOTfloatC²¢·Çfloat±êÇ©£¬±ØÐ뽫float±êÇ©±ÕºÏ¡£
ÔÚ <#div class=”floatB”></#div>
<#div class=”NOTfloatC”></#div>Ö®¼ä¼ÓÉÏ <#div class=”clear”></#div>Õâ¸ödivÒ»¶¨Òª×¢ÒâÉùÃ÷λÖã¬Ò»¶¨Òª·ÅÔÚ×îÇ¡µ±µÄµØ·½£¬¶øÇÒ±ØÐëÓëÁ½¸ö¾ßÓÐfloatÊôÐÔµÄdivͬ¼¶£¬Ö®¼ä²»ÄÜ´æÔÚǶÌ×¹ØÏµ£¬·ñÔò»á²úÉúÒì³£¡£
²¢ÇÒ½«clearÕâÖÖÑ


Ïà¹ØÎĵµ£º

9¸öÓÀ²»¹ýʱµÄcssÈýÀ¸²¼¾Ö

        ÎÒϲ»¶3À¸²¼¾ÖµÄÍøÒ³Éè¼Æ£¬µ«ÊÇ3À¸²¼¾ÖÏà¶ÔÀ´Ëµ¾Í±È½Ï¸´ÔÓ£¬ÓÐЩÄÑÒÔ¿ØÖÆ£¬¾¡¹ÜʱÏÂÕý»ðµÄWeb2.0ËÆºõºÜÉÙ²ÉÓÃ3À¸²¼¾Ö¡£µ«Ã»¹ØÏµ£¬ÎÒÃÇÊÇ·Ç·Ç·ÇÖ÷Á÷¡£
        Ê×ÏÈ£¬ÈκÎÒ»¸ö²¼¾Öͨ³£¶¼ÓÐheaders, navigation bars, content containers,
......

cssʵÏÖÇ¿ÖÆ²»»»ÐÐ/×Ô¶¯»»ÐÐ/Ç¿ÖÆ»»ÐÐ

Ç¿ÖÆ²»»»ÐÐ
div{
white-space:nowrap;
}
×Ô¶¯»»ÐÐ
div{
word-wrap: break-word;
word-break: normal;
}
Ç¿ÖÆÓ¢Îĵ¥´Ê¶ÏÐÐ
div{
word-break:break-all;
}
Ô´µØÖ·£ºhttp://www.iwms.net/n1919c40.aspx
......

javascript ¶¯Ì¬¼ÓÔØcss¡¢js

¼æÈÝIE¡¢FireFox¡¢Chrome
//¼ÓÔØjs
function loadJs(){
    if (!getObj('script_PlData')){
        var scriptObj= document.createElement("script");
        //scriptObj.id = 'script_1';
    &nb ......

CSS ÖÐcursorµÄ×÷Ó㺠Òýµ¼Óû§

¹ØÓÚcursorµÄ˵Ã÷£¬ÊéÉÏÊÇÕâÑù½²µÄ£º
      ÉèÖûò¼ìË÷ÔÚ¶ÔÏóÉÏÒÆ¶¯µÄÊó±êÖ¸Õë²ÉÓõĹâ±êÐÎ×´¡£
´ËÊôÐÔµÄÖµ¿ÉÒÔÊǶà¸ö£¬Æä¼äÓöººÅ·Ö¸ô¡£¼ÙÈçµÚÒ»¸öÖµ²»¿ÉÒÔ±»¿Í»§¶ËϵͳÀí½â»òËùÖ¸¶¨µÄ¹â±êÎÞ·¨ÕÒµ½¼°ÏÔʾ£¬ÔòµÚ¶þ¸öÖµ½«±»³¢ÊÔʹÓá£ÒÀ´ËÀàÍÆ¡£¼ÙÈçÈ«²¿Öµ¶¼²»¿ÉÓõϰ£¬Ôò´ËÊôÐÔ²»»á·¢Éú×÷Ó᣹ ......

cssµÄÊ®°Ë°ã¼¼ÇÉ

Ô­ÎÄ×÷ÕߣºRoger Johansson
×÷Õß¼ò½é£º×¡ÔÚÈðµä¸çµÂ±¤£¬1994Ä꿪ʼ½Ó´¥ºÍ²ÎÓëwebÉè¼Æ£¬456 Berea StreetÊÇËûµÄסַ£¬Òò´Ë²ÉÓÃÕâ¸öÃû×Ö×÷ΪËûµÄ¸öÈËÖ÷Ò³ÓòÃû
Ô­Îijö´¦£ºwww.456bereastreet.com
Ô­ÎÄ·¢±íʱ¼ä£º2005Äê3ÔÂ15ÈÕ
°¢½Ý˵Ã÷£º´ËÎÄÔ­Ãû"CSS tips and tricks"£¬ÓÐ2ƪ£¬ÎÒ½«ËüÃǺϲ¢·­ÒëÔÚ±¾ÎÄÖС£
×î½ü,¾­³ ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ