DIV CSSÉè¼ÆÊ±IE6/IE7/FF ¼æÈÝÐÔÎÊÌâ½â¾öƪ
ÔÚÍøÕ¾Éè¼ÆµÄʱºò£¬Ó¦¸Ã×¢ÒâcssÑùʽ¼æÈݲ»Í¬ä¯ÀÀÆ÷ÎÊÌâ£¬ÌØ±ðÊǶÔÍêȫʹÓÃDIV CSSÉè¼ÆµÄÍø£¬¾ÍÓ¦¸Ã¸ü×¢ÒâIE6 IE7 FF¶ÔCSSÑùʽµÄ¼æÈÝ£¬²»È»£¬ÄãµÄÍøÂÒ¿ÉÄܳöÈ¥²»Ïë³öÏÖµÄЧ¹û£¡
ËùÓÐä¯ÀÀÆ÷ ͨÓÃ
height: 100px;
IE6 רÓÃ
_height: 100px;
IE6 רÓÃ
*height: 100px;
IE7 רÓÃ
*+height: 100px;
IE7¡¢FF ¹²ÓÃ
height: 100px !important;
Ò»¡¢CSS ¼æÈÝ
ÒÔÏÂÁ½ÖÖ·½·¨¼¸ºõÄܽâ¾öÏÖ½ñËùÓмæÈÝ.
1, !important (²»ÊǺÜÍÆ¼ö£¬ÓÃÏÂÃæµÄÒ»Öָоõ×ȫ)
Ëæ×ÅIE7¶Ô!importantµÄÖ§³Ö, !important ·½·¨ÏÖÔÚÖ»Õë¶ÔIE6µÄ¼æÈÝ.(×¢Òâд·¨.¼ÇµÃ¸ÃÉùÃ÷λÖÃÐèÒªÌáǰ.)
´úÂë:
<style>
#wrapper {
width: 100px!important;
width: 80px;
}
</style>
2, IE6/IE77¶ÔFireFox <from Õë¶Ôfirefox ie6 ie7µÄcssÑùʽ>
*+html Óë *html ÊÇIEÌØÓеıêÇ©, firefox Ôݲ»Ö§³Ö.¶ø*+html ÓÖΪ IE7ÌØÓбêÇ©.
´úÂë:
<style>
#wrapper { width: 120px; }
*html #wrapper { width: 80px;}
*+html #wrapper { width: 60px;}
</style>
×¢Òâ:
*+html ¶ÔIE7µÄ¼æÈݱØÐë±£Ö¤HTML¶¥²¿ÓÐÈçÏÂÉùÃ÷£º
´úÂë:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"¡¡"http://www.w3.org/TR/html4/loose.dtd">
¶þ¡¢ÍòÄÜ float ±ÕºÏ(·Ç³£ÖØÒª!) ¿ÉÒÔÓÃÕâ¸ö½â¾ö¶à¸ödiv¶ÔÆëʱµÄ¼ä¾à²»¶Ô£¬
¹ØÓÚ clear float µÄÔÀí¿É²Î¼û [How To Clear Floats Without Structural Markup]
½«ÒÔÏ´úÂë¼ÓÈëGlobal CSS ÖÐ,¸øÐèÒª±ÕºÏµÄdiv¼ÓÉÏ class=”clearfix” ¼´¿É,ÂÅÊÔ²»Ë¬.
´úÂë:
<style>
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
.clearfix {display:block;}
</style>
Èý¡¢ÆäËû¼æÈݼ¼ÇÉ(Ï൱ÓÐÓÃ)
1, FFϸø div ÉèÖà padding ºó»áµ¼Ö width ºÍ height Ôö¼Ó, µ«IE²»»á.(¿ÉÓÃ!important½â¾ö)
2, ¾ÓÖÐÎÊÌâ.
1).´¹Ö±¾ÓÖÐ.½« line-height ÉèÖÃΪ µ±Ç° div ÏàͬµÄ¸ß¶È, ÔÙͨ¹ý vetical-align: middle.( ×¢ÒâÄÚÈݲ»Òª»»ÐÐ.)
2).ˮƽ¾ÓÖÐ. margin: 0 auto;(µ±È»²»ÊÇÍòÄÜ)
3, ÈôÐè¸ø a ±êÇ©ÄÚÄÚÈݼÓÉÏ Ñùʽ, ÐèÒªÉèÖà display: block;(³£¼ûÓÚµ¼º½±êÇ©)
4, FF ºÍ IE ¶Ô BOX Àí½âµÄ²îÒìµ¼ÖÂÏà²î 2px µÄ»¹ÓÐÉèΪ floatµÄdivÔÚieÏ margin¼Ó±¶µÈÎÊÌâ.
5, ul ±êÇ©ÔÚ FF ÏÂÃæÄ¬ÈÏÓÐ list-style. ºÍ padding .
Ïà¹ØÎĵµ£º
¡¡¡¡ÍøÒ³Éè¼ÆÖÐCSS²¼¾ÖÊǺÜÖØÒªµÄ²¿·Ö£¬ÏÂÃæ½éÉܼ¸ÖÖ¼ì²éµ÷ÊÔCSS²¼¾ÖµÄÓÐЧ·½·¨¡£
¡¡¡¡1.¼ì²éHTMLÔªËØÊÇ·ñÓÐÆ´Ð´´íÎó¡¢ÊÇ·ñÍü¼Ç½áÊø±ê¼Ç
¡¡¡¡¼´Ê¹ÊÇÀÏÊÖÒ²¾³£»áŪ´ídivµÄǶÌ×¹ØÏµ¡£¿ÉÒÔÓÃdreamweaverµÄÑéÖ¤¹¦Äܼì²éÒ»ÏÂÓÐÎÞ´íÎó¡£
¡¡¡¡2.¼ì²éCSSÊÇ·ñÊéдÕýÈ·
¡¡¡¡¼ì²éÒ»ÏÂÓÐÎÞÆ´Ð´´íÎó¡¢ÊÇ·ñÍü¼Ç½áβµÄ}µÈ¡£¿ÉÒÔÀûÓà ......
ÕâÊÇÒ»¸ö±ê×¼µÄCSSÏÂÀ²Ëµ¥ÖÆ×÷½Ì³Ì£¬ÓÐÕë¶ÔĿǰÁ÷ÐеÄIE6/IE7/IE8²»Í¬°æ±¾µÄCSS´úÂ룬Òò´Ë¿ÉÒÔÔÚIEÖ®¼äÍêÈ«¼æÈÝ£¬²»¹ýÆäËüµÄä¯ÀÀÆ÷Ïñ»ðºü/GGä¯ÀÀÆ÷Ö®ÀàµÄûÓвâÊÔ£¬Èç¹û¼æÈÝIE8µÄ»°£¬ÄÇô¼æÈÝ»ðºüÓ¦¸ÃÎÊÌâ²»´ó°É¡£²Ëµ¥Ê¹ÓÃÀ¶É«»ùµ÷£¬»¬Ïò¶þ¼¶²Ëµ¥¸ü»»±³¾°£¬²Ù×÷µÄ¸Ð¾õºÜÊæ·þ¡£
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XH ......
1¡¢²»ÒªÊ¹ÓùýСµÄͼƬ×ö±³¾°Æ½ÆÌ¡£Õâ¾ÍÊÇΪºÎºÜ¶àÈ˶¼²»Óà 1px µÄÔÒò£¬Õâ²ÅÖªÏþ¡£¿í¸ß 1px µÄͼƬƽÆÌ³öÒ»¸ö¿í¸ß 200px µÄÇøÓò£¬ÐèÒª 200*200=40, 000 ´Î£¬Õ¼ÓÃ×ÊÔ´¡£
2¡¢Îޱ߿ò¡£ÍƼöµÄд·¨ÊÇ border:none;£¬¹þ¹þ£¬ÎÒÒ»Ö±ÔÚÓÃÕâ¸ö¡£border:0; Ö»ÊǶ¨Òå±ß¿ò¿í¶ÈΪÁ㣬µ«±ß¿òÑùʽ¡¢ÑÕÉ«»¹Êǻᱻä¯ÀÀÆ÷½âÎö£¬Õ¼ÓÃ×ÊÔ´¡£
3 ......
ÔÎĵØÖ·£ºhttp://www.devwebpro.com/25-rounded-corners-techniques-with-css/
* This post is regularly updated. *
Rounded corners is one of the most popular and frequently requested
CSS techniques even the father of internet Google
also launch the rounded corners style markup
with her Google Ad ......
CSS¼òд¾ÍÊÇÖ¸½«¶àÐеÄCSSÊôÐÔÉùÃ÷»¯³ÉÒ»ÐУ¬ÓÖ³ÆÎªCSS´úÂëÓÅ»¯¡£CSS¼òдµÄ×î´óºÃ´¦¾ÍÊÇÄܹ»ÏÔ׿õÉÙ
CSSÎļþµÄ´óС£¬Æäʵ»¹ÓкܶàÆäËûÒæ´¦¡£Ó·Ö×¶øÔÓÂÒµÄCSSÑùʽ±í»áʹÄãÓöµ½ÎÊÌâÊÇÄÑÒÔµ÷ÊÔ¡£ÓÈÆäÊǵ±Ò»
¸öÍŶÓÔÚ½øÐÐÉè¼ÆµÄʱºò£¬ÄãµÄÓ·Ö×µÄCSS´úÂë»áʹÄãµÄÍŶӯäËû³ÉÔ±µÄ¹¤×÷ЧÂÊϽµ¡£
¡¡¡¡½ñÌ죬ÕûÀíÁËһЩCSS¼òÐ ......