CSS³£¼ûµÄÈÃÔªËØˮƽ¾ÓÖÐÏÔʾ·½·¨
ÓÃCSSÈÃÔªËؾÓÖÐÏÔʾ²¢²»ÊǼþºÜ¼òµ¥µÄÊÂÇé—ͬÑùµÄºÏ·¨CSS¾ÓÖÐÉèÖÃÔÚ²»Í¬ä¯ÀÀÆ÷ÖеıíÏÖÐÐΪȴ¸÷ÓÐǧÇï¡£ÈÃÎÒÃÇÏÈÀ´¿´Ò»ÏÂCSSÖг£¼ûµÄ¼¸ÖÖÈÃÔªËØˮƽ¾ÓÖÐÏÔʾµÄ·½·¨¡£
¡¡¡¡1.ʹÓÃ×Ô¶¯Íâ±ß¾àʵÏÖ¾ÓÖÐ
¡¡¡¡CSSÖÐÊ×Ñ¡µÄÈÃÔªËØˮƽ¾ÓÖеķ½·¨¾ÍÊÇʹÓÃmarginÊôÐÔ—½«ÔªËصÄmargin-leftºÍmargin-rightÊôÐÔÉèÖÃΪ
auto¼´¿É¡£ÔÚʵ¼ÊʹÓÃÖУ¬ÎÒÃÇ¿ÉÒÔΪÕâЩÐèÒª¾ÓÖеÄÔªËØ´´½¨Ò»¸öÆðÈÝÆ÷×÷ÓõÄdiv¡£ÐèÒªÌرð×¢ÒâµÄÒ»µã¾ÍÊÇ£¬±ØÐëΪ¸ÃÈÝÆ÷Ö¸¶¨¿í¶È£º
¡¡¡¡div#container {
¡¡¡¡margin-left: auto;
¡¡¡¡margin-right: auto;
¡¡¡¡width: 168px;
¡¡¡¡}
¡¡¡¡ÔÚ´ó¶àÊýÖ÷Á÷ä¯ÀÀÆ÷ÖУ¬ÕâÖÖ·½·¨¶¼·Ç³£ÓÐЧ£¬¼´Ê¹ÊÇWindowsƽ̨ÉϵÄIE6£¬ÔÚÆä±ê×¼¼æÈÝģʽ£¨compliance
mode£©ÏÂÒ²Äܹ»Õý³£ÏÔʾ¡£µ«²»ÐÒµÄÊÇ£¬ÔÚ¸üµÍ°æ±¾µÄIEÖУ¬ÕâÖÖÉèÖÃÈ´²¢²»ÄÜʵÏÖ¾ÓÖÐЧ¹û¡£ËùÒÔÈôÏëÔÚʵ¼ÊÏîÄ¿ÖÐʹÓÃÕâÖÖ·½·¨£¬ÄÇô¾ÍҪȷ±£Óû§µÄ
IEä¯ÀÀÆ÷°æ±¾²»µÍÓÚ6.0¡£
¡¡¡¡
¡¡¡¡¾¡¹ÜÔÚÖ§³ÖÉϲ»¾¡ÈçÈËÒ⣬µ«´ó¶àÊýÉè¼Æʦ¶¼½¨Ò龡¿ÉÄܵØʹÓÃÕâÖÖ·½·¨¡£¸Ã·½·¨Ò²±»ÈÏΪÊÇÔÚ¸÷ÖÖÓÃCSSʵÏÖÔªËØˮƽ¾ÓÖз½·¨ÖÐ×îÕýÈ·¡¢×îºÏÀíµÄÒ»ÖÖ¡£
¡¡¡¡2.ʹÓÃtext-alignʵÏÖ¾ÓÖÐ
¡¡¡¡ÁíÒ»ÖÖʵÏÖÔªËؾÓÖеķ½·¨ÊÇʹÓÃtext-alignÊôÐÔ£¬½«¸ÃÊôÐÔÖµÉèÖÃΪcenter²¢Ó¦Óõ½bodyÔªËØÉϼ´¿É¡£ÕâÖÖ×ö·¨Êdz¹Í·³¹Î²µÄhack£¬µ«ËüÈ´ÄܼæÈÝ´ó¶àÊýä¯ÀÀÆ÷£¬ËùÒÔÔÚijЩÇé¿öÏÂÒ²×ÔÈ»±Ø²»¿ÉÉÙ¡£
¡¡¡¡Ö®ËùÒÔ˵ËüÊÇhack£¬ÊÇÒòΪÕâÖÖ·½·¨²¢Ã»Óн«Îı¾ÊôÐÔÓ¦Óõ½Îı¾ÉÏ£¬¶øÊÇÓ¦Óõ½ÁË×÷ΪÈÝÆ÷µÄÔªËØÉÏ¡£ÕâÒ²¸øÎÒÃÇ´øÀ´Á˶îÍâµÄ¹¤×÷¡£ÔÚ´´½¨ºÃ²¼¾Ö±ØÐëµÄdivÖ®ºó£¬ÎÒÃÇÒª°´ÕÕÈçÏ´úÂëΪbodyÓ¦ÓÃtext-alignÊôÐÔ£º
¡¡¡¡body{
¡¡¡¡text-align:center;
¡¡¡¡}
¡¡¡¡Ö®ºó»á³öÏÖʲôÎÊÌâÂð£¿bodyµÄËùÓÐ×ÓËïÔªËض¼»á±»¾ÓÖÐÏÔʾ¡£
¡¡¡¡Òò´Ë£¬ÎÒÃǾÍÐèÒªÓÃÔÙдһÌõ¹æÔò£¬ÈÃÆäÖеÄÎı¾»Øµ½Ä¬ÈϵľÓ×ó¶ÔÆ룺
¡¡¡¡p {
¡¡¡¡text-align:left;
¡¡¡¡}
¡¡¡¡¿ÉÒÔÏëÏóÕâÌõ¸½¼ÓµÄ¹æÔò½«´øÀ´Ò»Ð©²»±ã¡£ÁíÍ⣬ÕæÕýÍêÈ«×ñѱê×¼µÄä¯ÀÀÆ÷²¢²»»á¸Ä±äÈÝÆ÷µÄλÖ㬶øÖ»»áÈÃÆäÖеÄÎÄ×Ö¾ÓÖÐÏÔʾ¡£
¡¡¡¡3.×éºÏʹÓÃ×Ô¶¯Íâ±ß¾àºÍÎı¾¶ÔÆë
¡¡¡¡ÒòΪÎı¾¶ÔÆë¾ÓÖз½Ê½ÓÐ×ÅÁ¼ºÃµÄÏòϼæÈÝÐÔ£¬ÇÒ×Ô¶¯Íâ±ß¾à·½Ê½Ò²±»´ó¶àÊýµ±´úä¯ÀÀÆ÷Ö§³Ö£¬ËùÒԺܶàÉè¼Æʦ½«¶þÕß×éºÏÆðÀ´Ê¹Óã¬ÒÔÆÚÈþÓÖÐЧ¹ûµÃµ½×î´óÏ޶ȵĿçä¯ÀÀÆ÷Ö§³Ö£º
¡¡¡¡body {
¡¡¡¡text-align: center;
¡¡¡¡}
¡¡¡¡#container {
¡¡¡¡margin-left: auto;
¡¡¡¡margin-right: auto;
¡¡¡¡border
Ïà¹ØÎĵµ£º
CssÖеÄÌõ¼þÑùʽ±í
<!--[if lte IE 6 ]>
<link rel="stylesheet" href="ie6.css" mce_href="ie6.css" media="all"
type="text/css"/>
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css" mce_href="ie7.css" media="all"
type="text/css"/>
<![en ......
¹ØÓÚCSS¶Ô¸÷¸öä¯ÀÀÆ÷¼æÈÝÒѾÊÇÀÏÉú³£Ì¸µÄÎÊÌâÁË, ÍøÂçÉϵĽ̳̱éµØ¶¼ÊÇ.ÒÔÏÂÄÚÈÝûÓÐÌ«¶àÐÂÓ±, ´¿Êô¸öÈË×ܽá, Ï£ÍûÄܶԳõѧÕßÓÐÒ»¶¨µÄ°ïÖú.
Ò»¡¢CSS HACK
ÒÔÏÂÁ½ÖÖ·½·¨¼¸ºõÄܽâ¾öÏÖ½ñËùÓÐHACK.
1, !important
Ëæ×ÅIE7¶Ô!importantµÄÖ§³Ö, !important ·½·¨ÏÖÔÚÖ»Õë¶ÔIE6µÄHACK.(×¢Òâд·¨.¼ÇµÃ¸ÃÉùÃ÷λÖÃÐèÒªÌáÇ°.)
< ......
div+cssä¯ÀÀÆ÷¼æÈÝÎÊÌâ½â¾ö·½·¨
´ÓÍøÉÏÊÕ¼¯ÁËIE7,6ÓëFireofxµÄ¼æÈÝÐÔ´¦Àí·½·¨²¢ÕûÀíÁËÒ»ÏÂ.¶ÔÓÚweb2.0µÄ¹ý¶È,Ç뾡Á¿ÓÃxhtml¸ñʽд´úÂë,¶øÇÒDOCTYPE Ó°Ïì CSS ´¦Àí,×÷ΪW3CµÄ±ê×¼,Ò»¶¨Òª¼Ó DOCTYPEÉùÃû.
CSS¼¼ÇÉ
1.divµÄ´¹Ö±¾ÓÖÐÎÊÌâ vertical-align:middle; ½«ÐоàÔö¼Óµ½ºÍÕû¸öDIVÒ»Ñù¸ß
line- ......
µÚÒ»ÖÖ£¬ÊÇCSS HACKµÄ·½·¨
height:20px; /*For Firefox*/
*height:25px; /*For IE7 & IE6*/
_height:20px; /*For IE6*/
×¢Òâ˳Ðò¡£
ÕâÑùÒ²ÊôÓÚCSS HACK£¬²»¹ýûÓÐÉÏÃæÕâÑù¼ò½à¡£
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */
......
ºÜÔç¾ÍÔÚÕâÀï¿´µ½¹ý½â¾ö·½°¸£¬Óëà»à»ÌÖÂÛºó·¢ÏÖÕâ¸ö·½°¸»¹ÊǺܿɿ¿µÄ¡£µ±È»£¬Î¨Ò»µÄȱµã¾ÍÊÇÿһ¸öÊôÐÔ¶¼ÒªÈ¥Hack£¬µ«ÎÒÔںܶàʵ¼ùÖУ¬Ö»ÓÑÐÞÕý’1-2¸öÊôÐԾͿÉÒÔÁË¡£
¾ßÌåд·¨ºÜÈÝÒ×£º
#someNode
{
position: fixed;
#position: fixed;
_position: fixed;
}
µÚһşøFirefoxÒÔ¼°ÆäËûä¯ÀÀÆ ......