CSS½â¾öDIV´¹Ö±¾ÓÖеÄÎÊÌâ
ÔÚ˵µ½Õâ¸öÎÊÌâµÄʱºò£¬Ò²ÐíÓÐÈË»áÎÊCSSÖв»ÊÇÓÐvertical-alignÊôÐÔÀ´ÉèÖô¹Ö±¾ÓÖеÄÂ𣿼´Ê¹ÊÇijЩä¯ÀÀÆ÷²»Ö§³ÖÎÒÖ»Ðè×öÉÙÐíµÄCSS Hack¼¼Êõ¾Í¿ÉÒÔ°¡£¡ËùÒÔÔÚÕâÀïÎÒ»¹Òª啰àÂÁ½¾ä£¬CSSÖеÄÈ·ÊÇÓÐvertical-alignÊôÐÔ£¬µ«ÊÇËüÖ»¶Ô(X)HTMLÔªËØÖÐÓµÓÐvalignÌØÐÔµÄÔªËزÅÉúЧ£¬ÀýÈç±í¸ñÔªËØÖеģ¼td£¾¡¢£¼th£¾¡¢£¼caption£¾µÈ£¬¶øÏñ£¼div£¾¡¢£¼span£¾ÕâÑùµÄÔªËØÊÇûÓÐvalignÌØÐԵģ¬Òò´ËʹÓÃvertical-align¶ÔËüÃDz»Æð×÷Óá£
css´¹Ö±¾ÓÖеĸ÷ÖÖ°ì·¨
¡¡¡¡Ò»¡¢µ¥Ðд¹Ö±¾ÓÖÐ
Èç¹ûÒ»¸öÈÝÆ÷ÖÐÖ»ÓÐÒ»ÐÐÎÄ×Ö£¬¶ÔËüʵÏÖ¾ÓÖÐÏà¶Ô±È½Ï¼òµ¥£¬ÎÒÃÇÖ»ÐèÒªÉèÖÃËüµÄʵ¼Ê¸ß¶ÈheightºÍËùÔÚÐеĸ߶Èline-heightÏàµÈ¼´¿É¡£È磺
div {
height:25px;
line-height:25px;
overflow:hidden;
}
¡¡¡¡Õâ¶Î´úÂëºÜ¼ò£¬ºóÃæʹÓÃoverflow:hiddenµÄÉèÖÃÊÇΪÁË·ÀÖ¹ÄÚÈݳ¬³öÈÝÆ÷»òÕß²úÉú×Ô¶¯»»ÐУ¬ÕâÑù¾Í´ï²»µ½´¹Ö±¾ÓÖÐЧ¹ûÁË¡£
£¼!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£¾
£¼title£¾ µ¥ÐÐÎÄ×ÖʵÏÖ´¹Ö±¾ÓÖÐ £¼/title£¾
£¼meta http-equiv="Content-Type" content="text/html; charset=utf-8" /£¾
£¼style type="text/css"£¾
body { font-size:12px;font-family:tahoma;}
div {
height:25px;
line-height:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
}
£¼/style£¾
£¼/head£¾
£¼body£¾
£¼div£¾ÏÖÔÚÎÒÃÇҪʹÕâ¶ÎÎÄ×Ö´¹Ö±¾ÓÖÐÏÔʾ£¡£¼/div£¾
£¼/body£¾
£¼/html£¾
¡¡¡¡²»¹ýÔÚInternet Explorer 6¼°ÒÔÏ°汾ÖУ¬ÕâºÍ·½·¨²»Ö§³Ö¶ÔͼƬÉèÖô¹Ö±¾ÓÖС£
¡¡¡¡¶þ¡¢¶àÐÐδ֪¸ß¶ÈÎÄ×ֵĴ¹Ö±¾ÓÖÐ
Èç¹ûÒ»¶ÎÄÚÈÝ£¬ËüµÄ¸ß¶ÈÊǿɱäµÄÄÇôÎÒÃǾͿÉÒÔʹÓÃÉÏÒ»½Ú½²µ½µÄʵÏÖˮƽ¾ÓÖÐʱʹÓõ½µÄ×îºóÒ»ÖÖ·½·¨£¬¾ÍÊÇÉ趨Padding£¬Ê¹ÉÏϵÄpaddingÖµÏàͬ¼´¿É¡£Í¬ÑùµÄ£¬ÕâÒ²ÊÇÒ»ÖÖ“¿´ÆðÀ´”µÄ´¹Ö±¾ÓÖз½Ê½£¬ËüÖ»²»¹ýÊÇʹÎÄ×Ö°Ñ£¼div£¾ÍêÈ«Ìî³äµÄÒ»ÖÖ·ÃÇó¶øÒÑ¡£¿ÉÒÔʹÓÃÀàËÆÏÂÃæµÄ´úÂ룺
div {
padding:25px;
}
¡¡¡¡ÕâÖÖ·½·¨µÄÓŵã¾ÍÊÇËü¿ÉÒÔÔÚÈκÎä¯ÀÀÆ÷ÉÏÔËÐУ¬²¢ÇÒ´úÂëºÜ¼òµ¥£¬Ö»²»¹ýÕâÖÖ·½·¨Ó¦ÓõÄÇ°Ìá¾ÍÊÇÈÝÆ÷µÄ¸ß¶È±ØÐëÊÇ¿ÉÉìËõµÄ¡£
£¼!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt
Ïà¹ØÎĵµ£º
position:relativeÔÚcssÉè¼ÆÖÐÓÐמÓסÇáÖصÄ×÷Óã¬Èç¹ûÄ㻹ûÓÐÓùýËüÄÇôÕæÊǾ޴óµÄÒź¶£¬ÒÔÇ°×ö¹ýdiv titleÌáʾ¿òµÄʱºòÓиö¼ýÍ·¶¨Î»ÎÊÌ⣬µ±Ê±µÄ½â¾ö°ì·¨¾ÍÊǶàÌ×ÓÃÒ»²ãdiv²¢ÇÒÁô°×Ò»¶¨´óС£¬ÓÃÀ´±³¾°ÏÔʾ¼ýÍ·£¬µ«ÊÇ·¢ÏÖ¼ýÍ·ÓÀÔ¶ÔÚÏÂÃ棬ûÓа취ÕÚ¸Ç
Ö÷ÌåÈںϵIJ¿·Ö
£¬ËùÒÔЧ¹ûÒ²¾Í²»ºÃ£¬µ±È»£¬´ÏÃ÷µÄÄ ......
CSS¶Ôä¯ÀÀÆ÷Æ÷µÄ¼æÈÝÐÔ¾ßÓкܸߵļÛÖµ£¬Í¨³£Çé¿öÏÂIEºÍFirefox´æÔںܴóµÄ½âÎö²îÒ죬ÕâÀï½éÉÜһϼæÈÝÒªµã¡£
¡¡¡¡³£¼û¼æÈÝÎÊÌ⣺
¡¡¡¡1.DOCTYPE
Ó°Ïì CSS ´¦Àí
¡¡¡¡2.FF: div ÉèÖà margin-left, margin-right Ϊ auto ʱÒѾ¾ÓÖÐ, IE
²»ÐÐ
¡¡¡¡3.FF: body ÉèÖà text-align ʱ, div ÐèÒªÉèÖà margin: auto(Ö÷ÒªÊÇ
m ......
ÏÖÔÚ¸ø´ó¼ÒÏ×ÉÏÑÕÉ«¶ÔÕÕÂ룺
FFFFFF
#DDDDDD
#AAAAAA
#888888
#666666
#444444
#000000
#FFB7DD
#FF88C2
#FF44AA
#FF0088&n ......
DIV
CSSÉè¼ÆʱIE6¡¢IE7¡¢FF Óë¼æÈÝÐÔÓйصÄÌØÐÔ2008-03-28
14:21ÔÚÍøÕ¾Éè¼ÆµÄʱºò£¬Ó¦¸Ã×¢ÒâcssÑùʽ¼æÈݲ»Í¬ä¯ÀÀÆ÷ÎÊÌ⣬ÌرðÊǶÔÍêȫʹÓÃDIV CSSÉè¼ÆµÄÍø£¬¾ÍÓ¦¸Ã¸ü×¢ÒâIE6 IE7
FF¶ÔCSSÑùʽµÄ¼æÈÝ£¬²»È»£¬ÄãµÄÍøÂÒ¿ÉÄܳöÈ¥²»Ïë³öÏÖµÄЧ¹û£¡
ËùÓÐä¯ÀÀÆ÷ ͨÓà ......
cssµÄdl dt ddµÄÓ¦Óãº
<!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= ......