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Ô²½Ç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} ......
SEOÖ÷Òª¾ÍÊÇͨ¹ý¶ÔÍøÕ¾µÄ½á¹¹£¬±êÇ©£¬ÅŰæµÈ¸÷·½ÃæµÄÓÅ»¯£¬Ê¹GoogleµÈËÑË÷ÒýÇæ¸üÈÝÒ×ËÑË÷ÍøÕ¾µÄÄÚÈÝ£¬²¢ÇÒÈÃÍøÕ¾µÄ¸÷¸öÍøÒ³ÔÚGOOGLEµÈËÑË÷ÒýÇæÖлñµÃ½Ï¸ßµÄÆÀ·Ö£¬´Ó¶ø»ñµÃ½ÏºÃµÄÅÅÃû¡£DIV+CSSÍøÒ³²¼¾Ö¶ÔSEOÓÐÄÄЩӰÏìÄØ£¿´úÂ뾫¼òʹÓÃDIV+CSS²¼¾Ö£¬Ò³Ãæ´úÂ뾫¼ò£¬ÕâÒ»µãÏàÐŶÔXHTMLÓÐËùÁ˽âµÄ¶¼ÖªµÀ¡£´úÂ뾫¼òËù´øÀ´µÄÖ±½ ......
ý½éÀàÐÍ(Media Types)ÔÊÐíÄ㶨ÒåÒÔºÎÖÖý½éÀ´Ìá½»Îĵµ£¬Îĵµ¿ÉÒÔ±»ÏÔʾÔÚÏÔʾÆ÷¡¢´òÓ¡»ú»òÕßÌý¾õä¯ÀÀÆ÷µÈµÈ¡£
ʵÀý
ÏÂÃæÕâ¸öÀý×ÓÖеÄÑùʽ¸æÖªä¯ÀÀÆ÷ÔÚÏÔʾÆ÷ÉÏÏÔʾ 14 ÏñËØµÄ Verdana ×ÖÌå¡£µ«ÊǼÙÈçÒ³ÃæÐèÒª±»´òÓ¡£¬½«Ê¹Óà 10 ¸öÏñËØµÄ Times ×ÖÌå¡£×¢Ò⣺font-weight ±»ÉèÖÃΪ´ÖÌ壬²»ÂÛÏÔʾÆ÷»¹ÊÇֽý½é£º
<%@ pa ......
ÕâÊÇÔÏÈÎÒдµÄ ±¸ÍüµÄ ¾¡¹ÜдµÄºÜÀÃ
frame.css
Java´úÂë
CHARSET "UTF-°Ë";
html,body{
margin: Áãpx;
padding: Áãpx;
height: 100%;
/*font-size: 12px;
color: #666666;
background: #ffffff;*/
}
*{
margin: Áãpx;
padding: Áãpx;
}
/*ÓÉÓÚÓÃÁËÏà¶ÔλÖøñ¾Ö£¬Ó¦·Ö±æÂÊÌ«´óʱ£¬Í¼Æ¬ºÍÎÄ ......
µ±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 ......