因为设置height,margin-top:23px无效 IE6 兼容
FF10的效果
IE6的效果
#content .text{ margin-top:23px; border:1px solid #99FF00; overflow:hidden; height:200px;}
我发现是 设置了高度的原因 如果我不设置高度margin-top:23px可以生效 如果设置高度那么就成IE6那种情况了
<!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=GB2312" />
<title>无标题文档</title>
<style>
body,h4{ margin:0; padding:0}
/*头部 header*/
#header,#menu{ width:960px; margin:0 auto}
#hcolumn{ background:#FFFAFA; height:35px; line-height:35px}
#hcolumn a{ margin: 0 5px; float:left; text-decoration:none}
.logo{ width:960px; display:block; margin-bottom:5px}/*display:block 兼容IE下图片有2像素的白框*/
/*导航栏 menu*/
#menu{ height:50px}
#menu .nav ul{ list-style:none; margin:0; padding:0}
#menu .nav ul li{float:left}
#menu .nav ul li a { display:block; height:50px; line-height:50px; float:left; padding:0 18px; background:url(images/b02.gif); text-decoration:none; color:#FFFFFF; font-weight:bold}
#menu .nav ul li a:hover{ color:#00FF00} /*#A52021*/
#menu .mn_left,.mn_right{height:50px; width:9px; float:left}
#menu .mn_left{background:url(images/b01.gif) no-repeat;}
#menu .mn_right{background:url(images/b03.gif) no-repeat;}
/*内容 content*/
#content{width:960px; margin:0 auto;}
#content .left{ float:left; border:1px solid #00FF00; width:300px; height:300px}
#content .right{ float:right; border:1px solid #00FF00; width:300px; height:300px}
#content .center{ height:300px; width:328px; border:5px solid #EAEAEA; margin:8px auto; position:relative}
#content .bgimg{ background:url(images/b09.gif) no-repeat; width:25px; height:25px; position:absolute; top:-5px; left:-4px}
#content .text{ margin-top:23px; border:1px solid #99FF00; overflow:hidden; height:200px;}
#content .title{ margin:0 auto; text-align:center;}
#content .bottom{ border:1px solid #FF0000; clear:both}
</style>
</head>
<body>
<div id="header">
<div id="hcolumn">
<a href="#">登录</a><a href="#">注册</a>
</div>
<img src="images/header.jpg" class="logo"/>
</div>
<div id="menu">
<div class="nav">
<div class="mn_left"></div>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">养生堂</a></li>
<li><a href="#">养生堂</a></li>
<li><a href="#">养生堂</a></li>
<li><a href="#">养生糖糖</a></li>
<li><a href="#">养生堂养堂</a></li>
<li><a href="#">养生堂养</a></li>
</ul>
<div class="mn_right"></div>
</div>
</div>
<div id="content">
<div class="left">左边</div>
<div class="right">右边</div>
<div class="center">
<div class="bgimg"></div>
<div class="text">
<div class="title"><h4>标题标题</h4></div>
<div class="txt">文本文......</div>
</div>
</div>
<div class="bottom">下面</div>
<div>下面没有class="bottom"</div>
</div>
</body>
</html>
[解决办法]
margin-top可以转化为父层的padding-top效果一些样的。
