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

CSSÍêÃÀ¼æÈÝIE6/IE7/FFµÄͨÓ÷½·¨

Ò»¡¢CSS HACK
ÒÔÏÂÁ½ÖÖ·½·¨¼¸ºõÄܽâ¾öÏÖ½ñËùÓÐHACK.
1, !important
Ëæ×ÅIE7¶Ô!importantµÄÖ§³Ö, !important ·½·¨ÏÖÔÚÖ»Õë¶ÔIE6µÄHACK.(×¢Òâд·¨.¼ÇµÃ¸ÃÉùÃ÷λÖÃÐèÒªÌáÇ°.)
<style>
#wrapper
{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>
2, IE6/IE77¶ÔFireFox
*+html Óë *html ÊÇIEÌØÓеıêÇ©, firefox Ôݲ»Ö§³Ö.¶ø*+html ÓÖΪ IE7ÌØÓбêÇ©.
<style>
#wrapper
{
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, ×¢Òâ˳Ðò */
}
</style>
×¢Òâ:
*+html ¶ÔIE7µÄHACK ±ØÐë±£Ö¤HTML¶¥²¿ÓÐÈçÏÂÉùÃ÷£º
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"¡¡"http://www.w3.org/TR/html4/loose.dtd">
¶þ¡¢ÍòÄÜ float ±ÕºÏ
¹ØÓÚ clear float µÄÔ­Àí¿É²Î¼û [How To Clear Floats Without Structural Markup]
½«ÒÔÏ´úÂë¼ÓÈëGlobal CSS ÖÐ,¸øÐèÒª±ÕºÏµÄdiv¼ÓÉÏ class="clearfix" ¼´¿É,ÂÅÊÔ²»Ë¬.
<style>
/* Clear Fix */
.clearfix:after
{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
</style>
Èý¡¢ÆäËû¼æÈݼ¼ÇÉ
1, FFϸø div ÉèÖà padding ºó»áµ¼Ö width ºÍ height Ôö¼Ó, µ«IE²»»á.(¿ÉÓÃ!important½â¾ö)
2, ¾ÓÖÐÎÊÌâ.
1).´¹Ö±¾ÓÖÐ.½« line-height ÉèÖÃΪ µ±Ç° div ÏàͬµÄ¸ß¶È, ÔÙͨ¹ý vertical-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 . ×îºÃÊÂÏÈÉùÃ÷, ÒÔ±ÜÃâ²»±ØÒªµÄÂé·³. (³£¼ûÓÚµ¼º½±êÇ©ºÍÄÚÈÝÁбí)
6, ×÷ΪÍⲿ wrapper µÄ div ²»Òª¶¨ËÀ¸ß¶È, ×îºÃ»¹¼ÓÉÏ overflow: hidden.ÒÔ´ïµ½¸ß¶È×ÔÊÊÓ¦.
7, ¹ØÓÚÊÖÐιâ±ê. cursor: pointer. ¶øhand Ö»ÊÊÓÃÓÚ IE.
1 Õë¶Ôfirefox ie6 ie7µÄcssÑùʽ
ÏÖÔڴ󲿷ֶ¼ÊÇÓÃ!importantÀ´hack£¬¶ÔÓÚie6ºÍfirefox²âÊÔ¿ÉÒÔÕý³£ÏÔʾ£¬
µ


Ïà¹ØÎĵµ£º

ʹÓÃCSSÍêÃÀʵÏÖ´¹Ö±¾ÓÖеķ½·¨

¡¡¡¡Ê¹ÓÃXHTML+CSSÀ´ÊµÏÖÔªËصĴ¹Ö±¾ÓÖÐÒ»Ö±ÊÇÇ°¶Ë¿ª·¢ÖеÄÒ»¸ö±È½Ï¸´ÔÓÇÒ¼¬ÊÖµÄÎÊÌ⣬×÷ΪÍøÒ³Éè¼Æʦ»òÇ°¶Ë¿ª·¢¹¤³Ìʦ£¬Õâ¸ö´¹Ö±¾ÓÖÐÎÊÌâ
Ò²ÊDZØÐëÕÆÎյļ¼ÇÉÖ®Ò»£¬Ò»Ð©»¥ÁªÍø¹«Ë¾ÃæÊÔÌâÖÐÒ²»á³öÏÖÕâÀàÌâÄ¿¡£½ñÌ챩·ç±ò±ò½«·ÖÏíÒ»¸öÍêÃÀͨ¹ýCSSʵÏÖ´¹Ö±¾ÓÖеķ½·¨£¬¸Ã·½·¨ÊÇÓÉaka
Yuhů·¢Ã÷µÄ£¬Õâ¸ö·½·¨Ò²ÊÇÄ¿Ç°±©·ç ......

cssÔ²½Çbox±¸Íü

cssÔ²½Çbox±¸Íü <style type="text/css">
div.box{}
div.boxtitle{background-color:#888; height:24px; line-height:24px; vertical-align:middle; padding-left:10px;}
div.boxcontent{ padding:10px; border:1px #888 solid;}
b.r   {display:block;background: #fff} ......

DIV+CSS²¼¾Ö¶ÔseoÓÐÄÄЩӰÏ죿£¿


SEOÖ÷Òª¾ÍÊÇͨ¹ý¶ÔÍøÕ¾µÄ½á¹¹£¬±êÇ©£¬ÅÅ°æµÈ¸÷·½ÃæµÄÓÅ»¯£¬Ê¹GoogleµÈËÑË÷ÒýÇæ¸üÈÝÒ×ËÑË÷ÍøÕ¾µÄÄÚÈÝ£¬²¢ÇÒÈÃÍøÕ¾µÄ¸÷¸öÍøÒ³ÔÚGOOGLEµÈËÑË÷ÒýÇæÖлñµÃ½Ï¸ßµÄÆÀ·Ö£¬´Ó¶ø»ñµÃ½ÏºÃµÄÅÅÃû¡£DIV+CSSÍøÒ³²¼¾Ö¶ÔSEOÓÐÄÄЩӰÏìÄØ£¿´úÂ뾫¼òʹÓÃDIV+CSS²¼¾Ö£¬Ò³Ãæ´úÂ뾫¼ò£¬ÕâÒ»µãÏàÐŶÔXHTMLÓÐËùÁ˽âµÄ¶¼ÖªµÀ¡£´úÂ뾫¼òËù´øÀ´µÄÖ±½ ......

div¾ÓÖеÄÉèÖøÃÈçºÎ±àдcss£¿

div¾ÓÖеÄÉèÖøÃÈçºÎ±àдcss£¿
ÎÒÃÇÔÚ´«Í³µÄ±í¸ñ²¼¾ÖÖУ¬Ö»ÒªÉèÖñí¸ñµÄ¾ÓÖÐÊôÐÔ¾ÍʵÏÖÁ˾ÓÖеĿéÔªËØ¡£Ó¦ÓÃdiv cssÍøÕ¾²¼¾Ö£¬divµÄ¾ÓÖиÃÈçºÎ±àдcssÀ´¿ØÖÆËüÄØ£¿
¡¡¡¡Ö÷ÒªµÄÑùʽ¶¨ÒåÈçÏ£º
¡¡¡¡body {text-align: center;}
¡¡¡¡#center { margin-right: auto; margin-left: auto; }
¡¡¡¡Ê×ÏÈÔÚ¸¸¼¶ÔªËض¨Òåtext-a ......

css ×óÓÒMargin¼Ó±¶µÄÎÊÌâ

µ±div²ãΪfloatʱ£¬IE6ÖÐbox×óÓÒµÄmargin»á¼Ó±¶
±ÈÈ磺
<!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>
<meta http-equiv="Content-Type" content="text/htm ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØͼ | ¸ÓICP±¸09004571ºÅ