¸÷ÖÖCSS bugÓë¼¼ÇÉ
1¡¢ÈÝÆ÷²»À©Õ¹ÎÊÌâ
Õâ¸öÊǾ³£ÔÚÎÒÇÐͼµÄʱºòÓöµ½µÄÎÊÌ⣬È磺
<!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/html; charset=utf-8" />
<title>ÈÝÆ÷²»À©Õ¹ÎÊÌâ</title>
<style type="text/css">
#divGroup{ border:2px solid #333;}
#a,#b{ border:2px solid #333; float:left; margin:5px;}
</style>
</head>
<body>
<div id="divGroup">
<div id="a">×ÓÈÝÆ÷a</div>
<div id="b">×ÓÈÝÆ÷b</div>
</div>
</body>
</html>
Ìáʾ£ºÄã¿ÉÒÔÏÈÐ޸IJ¿·Ö´úÂëÔÙÔËÐС£
½â¾ö°ì·¨£ºÔÚdivGroupÀïÃæ¼ÓÉÏoverflow:hidden;zoom:1;
ps:ºÜ¶àÈ˶¼ÊÇÔÚÀïÃæ¼Ó¸öÇå³ý¸¡¶¯¿Õ±êÇ©À´½â¾ö£¬ÆäʵÕâ¸öÊÇ´íÎó°ì·¨¡£Ì«Ôö¼Ó´úÂëÁ¿ÁË
2¡¢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/html; charset=utf-8" />
<title>FFÏÂÈçºÎʹÁ¬Ðø³¤×Ö¶Î×Ô¶¯»»ÐÐ</title>
<style type="text/css">
body {
margin:0
}
div {
float:left;
margin-left:10px;
width:200px;
height:200px;
border:1px solid red
}
</style>
</head>
</script>
<body>
<div>
<a href="#">
www.hemin.cnwww.hemin.cnwww.hemin.cnwww.hemin.cn
</a>
</div>
</body>
</html>
Ìáʾ£ºÄã¿ÉÒÔÏÈÐ޸IJ¿·Ö´úÂëÔÙÔËÐС£
ÉèÖÃΪfloatµÄdivÔÚieÏÂÉèÖõÄmargin»á¼Ó±¶¡£ÕâÊÇÒ»¸öie6¶¼´æÔÚµÄbug¡£
½â¾ö°ì·¨ÊÇÔÚÕâ¸ödivÀïÃæ¼ÓÉÏdisplay:inline;
ps:ÎÒÒ»°ãºÜÉÙÓÃmargin£¬Ò»°ãÇé¿öÓÃpaddingÀ´¿ØÖƱ߾࣬ÒÔÃâ³öÏÖÁíÍâµÄbug
3¡¢¹ØÓÚÈÝÆ÷µÄ°üº¹ØÏµ
¡¡¡¡ºÜ¶àʱºò£¬ÓÈÆäÊÇÈÝÆ÷ÄÚÓÐÆ½Ðв¼¾Ö£¬ÀýÈçÁ½¡¢Èý¸öfloatµÄdivʱ£¬¿í¶ÈºÜÈÝÒ׳öÏÖÎÊÌâ¡£ÔÚIEÖУ¬Íâ²ãµÄ¿í¶È»á±»ÄÚ²ã¸ü¿íµÄdiv¼·ÆÆ¡£Ò»¶¨ÒªÓÃPhotoshop»òÕßFireworkÁ¿È¡ÏñËØ¼¶µÄ¾«¶È¡£
4¡¢
Ïà¹ØÎĵµ£º
ºÐ×Ó±êÇ©ºÍÊôÐÔ¶ÔÕÕ
CSSÓï·¨£¨²»Çø·Ö´óСд£©
JavaScriptÓï·¨£¨Çø·Ö´óСд£©
border
border
border-bottom
borderBottom
border-bottom-color
borderBottomColor
border-bottom-style
borderBottomStyle
border-bottom-width
borderBottomWidth
border-color
borderColor
border-left
borderLeft
border ......
.
Transparent
{
width
: 16px
;
height
: 42px
;
background
: transparent
url(images/transparent.png)
no-repeat
;
}
*
html
.
Transparent
{
&nbs ......
¡¡¡¡ÔÚWeb±ê×¼ÖеÄÒ³Ãæ²¼¾ÖÊÇʹÓÃDivÅäºÏCSSÀ´ÊµÏֵġ£ÕâÆäÖÐ×î³£Óõ½µÄ¾ÍÊÇʹÕû¸öÒ³ÃæË®Æ½¾ÓÖеÄЧ¹û£¬ÕâÊÇÔÚÒ³Ãæ²¼¾ÖÖлù±¾£¬Ò²ÊÇ×îÓ¦¸ÃÊ×ÏÈÕÆÎÕµÄ֪ʶ¡£²»¹ý£¬»¹ÊǾ³£»áÓÐÈËÎʵ½Õâ¸öÎÊÌ⣬ÔÚÕâÀïÎÒ¼òµ¥×ܽáÒ»ÏÂʹÓÃDivºÍCSSʵÏÖÒ³ÃæË®Æ½¾ÓÖеķ½·¨£º
¡¡¡¡Ò»¡¢margin:auto 0 Óë text-aligh:center
¡¡¡¡ÔÚÏÖ´úä¯ÀÀÆ÷£¨È ......
1¡¢Ê®Áù½øÖƵÄÑÕɫֵ¶ÔλÊýÓë´óСд
±àдʮÁù½øÖÆÑÕɫֵʱÄã¿ÉÄÜ»áÓÃСд×Öĸ»òÊ¡ÂÔ³É3λÊý£¬¹ØÓÚÕâд·¨Ã»ÕÒµ½È·ÊµµÄÊý¾ÝÖ¤Ã÷¶Ôä¯ÀÀÆ÷µÄäÖȾЧÂÊÊÇ·ñÓÐÓ°Ï죬µ«Ê®Áù½øÖƵÄÑÕɫֵĬÈϱê×¼ÊÇ´óд¼°6λÊý±ê×¢¡£ÔÚδ֪Çé¿öϲ»Ï£ÍûðÏÕ¶ø½µµÍÁËäÖȾµÄЧÂÊ¡£
* ²»ÔÞ³É - color:#f3a;
* ½¨ÒéÓà - color:#FF33AA;
2¡¢disp ......
ÔÚÍøÕ¾Éè¼ÆµÄʱºò£¬Ó¦¸Ã×¢ÒâcssÑùʽ¼æÈݲ»Í¬ä¯ÀÀÆ÷µÄÎÊÌâ£¬ÌØ±ðÊǶÔÍêȫʹÓÃDIV CSSÉè¼ÆµÄÍøÒ³£¬¾ÍÓ¦¸Ã¸ü×¢ÒâIE6 IE7 FF¶ÔCSSÑùʽµÄ¼æÈÝ£¬²»È»£¬ÄãµÄÍøÒ³¿ÉÄÜ»áºÍÄãÀíÏëµÄЧ¹ûÏàȥʮÍò°ËǧÀº£Á¿È¨Íþ¿ª·¢×ÊÁÏ¡£
ËùÓÐä¯ÀÀÆ÷ ͨÓÃ
height: 100px;
IE6 רÓÃ
_height: 100px;
IE6 רÓÃ
*height: 100px;  ......