IE6下导航栏另起了一行。。。在IE7、8、FF下显示正常，高手来帮改下，能说出来什么最好
<!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>
*{
border:0px;
margin:0px;
padding:0px;
font-size:12px;
font-family:"宋体","新宋体", "黑体";
}
body{
background:#CCCCCC;
text-align:center;
}
#alls{
position:relative;
margin:0px auto 0px auto;
width:1000px;
text-align:left;
background:#FFFFFF;
}
#content{
width:100%;
background:url(bannerbg.gif) ;
height:108px;
}
#content h2{
font-size:32px;
font-family:"黑体";
color:#FFFFFF;
}
#pa{
padding-top:20px;
padding-bottom:5px;
padding-left:10px;
margin:0px;
background:url(banner.gif) no-repeat right;
}
#pb{
float:left;
margin-left:60px;
width:110px;
}
#content h4{
font-size:18px;
font-family: "宋体";
color:#FFFFFF;
}
#dh{
float:left;
background:#FED499;
width:822px;
height:39px;
margin-left:8px;
}
#dh ul{
list-style:none;
margin-left:50px;
}
#dh ul li{
float:left;
width:100px;
padding-top:10px;
}
#dh ul li a{
color:#000000;
font-family:"黑体", "宋体";
text-decoration:none;
}
#dh ul li a span{
line-height:150%;
padding-top:5px;}
#ss{
background:#F05D00;
height:5px;
width:100%;
z-index:1;
}
#jj{
margin-left:20px;}
#lefts{
width:180px;;
background:#FED499;
height:460px;
margin:0px;
float:left;
/*background:url(l1.gif) no-repeat right center;*/
}
#lefts ul{
list-style:none;
margin-left:25px;
}
#lefts div{
width:150px;
background:#FFF3EB;
margin-top:15px;
margin-left:15px;
margin-right:8px;
height:150px;
}
#lefts div p{
background:url(adhad.gif) no-repeat top center;
padding-top:7px;
padding-left:28px;
height:30px;
}
#lefts div p span{
font: "宋体";
font-size:13px;
font-weight:bold;
color:#053F94;}
#lefts div li{
padding-top:5px;
padding-bottom:4px;
padding-left:18px;
width:80px;
background:url(li.gif) no-repeat 2px 11px;
}
#lefts div li a{
display:block;
padding-top:5px;}
#rights{
float:left;
width:780px;
height:100%;
}
#foots{
clear:both;
width:100%;
height:44px;
background:#CCCCCC;
background:url(footbg.gif) repeat-x;}
#ccc{
position:relative;
width:100%}
</style>
</head>
<body>
<div id="alls">
<div id="content">
<div id="titles">
<div id="pa"><span><h2>企业网站</h2></span></div>
<div id="pb"><span><h4>后台管理</h4></span></div>
<div id="dh">
<ul>
<li><a href="#"><span>导航栏一</span></a><span id="jj">|</span></li>
<li><a href="#"><span>导航栏二</span></a><span id="jj">|</span></li>
<li><a href="#"><span>导航栏三</span></a><span id="jj">|</span></li>
<li><a href="#"><span>导航栏四</span></a><span id="jj">|</span></li>
<li><a href="#"><span>导航栏五</span></a><span id="jj">|</span></li>
<li><a href="#"><span>导航栏六</span></a></li>
</ul>
</div>
</div>
</div>
<div id="ccc">
<div id="lefts">
<div>
<p><span>系统管理</span></p>
<ul>
<li><a href="#">文章管理</a></li>
<li><a href="#">案例管理</a></li>
<li><a href="#">联系方式管理</a></li>
</ul>
</div>
<div>
<p><span>管理员帐户管理</span></p>
<ul>
<li><a href="#">更改管理密码</a></li>
<li><a href="#">更改管理账号</a></li>
<li><a href="#">退出管理</a></li>
</ul>
</div>
</div>
<div id="rights"></div>
</div>
<div id="foots"></div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{
border:0px;
margin:0px;
padding:0px;
font-size:12px;
font-family:"宋体","新宋体", "黑体";
}
body{
background:#CCCCCC;
text-align:center;
}
#alls{
position:relative;
margin:0px auto 0px auto;
width:1000px;
text-align:left;
background:#FFFFFF;
}
#content{
width:100%;
background:url(bannerbg.gif) ;
height:108px;
}
#content h2{
font-size:32px;
font-family:"黑体";
color:#FFFFFF;
}
#pa{
padding-top:20px;
padding-bottom:5px;
padding-left:10px;
margin:0px;
background:url(banner.gif) no-repeat right;
}
#pb{
float:left;
margin-left:60px;
width:110px;
}
#content h4{
font-size:18px;
font-family: "宋体";
color:#FFFFFF;
}
#dh{
float:left;
background:#FED499;
width:822px;
height:39px;
margin-left:8px;
}
#dh ul{
list-style:none;
margin-left:50px;
}
#dh ul li{
float:left;
width:100px;
padding-top:10px;
}
#dh ul li a{
color:#000000;
font-family:"黑体", "宋体";
text-decoration:none;
}
#dh ul li a span{
line-height:150%;
padding-top:5px;}
#ss{
background:#F05D00;
height:5px;
width:100%;
z-index:1;
}
#jj{
margin-left:20px;}
#lefts{
width:180px;;
background:#FED499;
height:460px;
margin:0px;
float:left;
/*background:url(l1.gif) no-repeat right center;*/
}
#lefts ul{
list-style:none;
margin-left:25px;
}
#lefts div{
width:150px;
background:#FFF3EB;
margin-top:15px;
margin-left:15px;
margin-right:8px;
height:150px;
}
#lefts div p{
background:url(adhad.gif) no-repeat top center;
padding-top:7px;
padding-left:28px;
height:30px;
}
#lefts div p span{
font: "宋体";
font-size:13px;
font-weight:bold;
color:#053F94;}
#lefts div li{
padding-top:5px;
padding-bottom:4px;
padding-left:18px;
width:80px;
background:url(li.gif) no-repeat 2px 11px;
}
#lefts div li a{
display:block;
padding-top:5px;}
#rights{
float:left;
width:780px;
height:100%;
}
#foots{
clear:both;
width:100%;
height:44px;
background:#CCCCCC;
background:url(footbg.gif) repeat-x;}
#ccc{
position:relative;
width:100%}
</style>
</head>
<body>
<div id="alls">
<div id="content">
<div id="titles">
<div id="pa"><span><h2>企业网站</h2></span></div>
<div id="pb"><span><h4>后台管理</h4></span></div>
<div id="dh">
<ul>
<li><a href="#"><span>导航栏一</span></a><span id="jj">|</span></li>
<li><a href="#"><span>导航栏二</span></a><span id="jj">|</span></li>
<li><a href="#"><span>导航栏三</span></a><span id="jj">|</span></li>
<li><a href="#"><span>导航栏四</span></a><span id="jj">|</span></li>
<li><a href="#"><span>导航栏五</span></a><span id="jj">|</span></li>
<li><a href="#"><span>导航栏六</span></a></li>
</ul>
</div>
</div>
</div>
<div id="ccc">
<div id="lefts">
<div>
<p><span>系统管理</span></p>
<ul>
<li><a href="#">文章管理</a></li>
<li><a href="#">案例管理</a></li>
<li><a href="#">联系方式管理</a></li>
</ul>
</div>
<div>
<p><span>管理员帐户管理</span></p>
<ul>
<li><a href="#">更改管理密码</a></li>
<li><a href="#">更改管理账号</a></li>
<li><a href="#">退出管理</a></li>
</ul>
</div>
</div>
<div id="rights"></div>
</div>
<div id="foots"></div>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
bhbhxy 2010-01-04
- 打赏
- 举报
又是IE6，呵呵，记得加display:inline
xuexijava 2010-01-04
- 打赏
- 举报
3Q。。。。。
我改改看
结贴给分
我改改看
结贴给分
shuxin860425 2010-01-04
- 打赏
- 举报
结构有点儿乱
你试着修改几个地方：
1.#pb{
float:left;
padding-left:60px;
width:110px;
}
2.浮动的问题：记得清除
<body>
<div id="alls">
<div id="content">
<div id="titles">
<div id="pa"> <span> <h2>企业网站 </h2> </span> </div>
<div>
<div id="pb"> <span> <h4>后台管理 </h4> </span> </div>
<div id="dh">
<ul>
<li> <a href="#"> <span>导航栏一 </span> </a> <span id="jj">| </span> </li>
<li> <a href="#"> <span>导航栏二 </span> </a> <span id="jj">| </span> </li>
<li> <a href="#"> <span>导航栏三 </span> </a> <span id="jj">| </span> </li>
<li> <a href="#"> <span>导航栏四 </span> </a> <span id="jj">| </span> </li>
<li> <a href="#"> <span>导航栏五 </span> </a> <span id="jj">| </span> </li>
<li> <a href="#"> <span>导航栏六 </span> </a> </li>
</ul>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
<div id="ccc" style="clear:both;">
<div id="lefts">
<div>
<p> <span>系统管理 </span> </p>
<ul>
<li> <a href="#">文章管理 </a> </li>
<li> <a href="#">案例管理 </a> </li>
<li> <a href="#">联系方式管理 </a> </li>
</ul>
</div>
<div>
<p> <span>管理员帐户管理 </span> </p>
<ul>
<li> <a href="#">更改管理密码 </a> </li>
<li> <a href="#">更改管理账号 </a> </li>
<li> <a href="#">退出管理 </a> </li>
</ul>
</div>
</div>
<div id="rights"> </div>
</div>
<div style="clear: both;"></div>
<div id="foots"> </div>
</div>
</body>
你试着修改几个地方：
1.#pb{
float:left;
padding-left:60px;
width:110px;
}
2.浮动的问题：记得清除
<body>
<div id="alls">
<div id="content">
<div id="titles">
<div id="pa"> <span> <h2>企业网站 </h2> </span> </div>
<div>
<div id="pb"> <span> <h4>后台管理 </h4> </span> </div>
<div id="dh">
<ul>
<li> <a href="#"> <span>导航栏一 </span> </a> <span id="jj">| </span> </li>
<li> <a href="#"> <span>导航栏二 </span> </a> <span id="jj">| </span> </li>
<li> <a href="#"> <span>导航栏三 </span> </a> <span id="jj">| </span> </li>
<li> <a href="#"> <span>导航栏四 </span> </a> <span id="jj">| </span> </li>
<li> <a href="#"> <span>导航栏五 </span> </a> <span id="jj">| </span> </li>
<li> <a href="#"> <span>导航栏六 </span> </a> </li>
</ul>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
<div id="ccc" style="clear:both;">
<div id="lefts">
<div>
<p> <span>系统管理 </span> </p>
<ul>
<li> <a href="#">文章管理 </a> </li>
<li> <a href="#">案例管理 </a> </li>
<li> <a href="#">联系方式管理 </a> </li>
</ul>
</div>
<div>
<p> <span>管理员帐户管理 </span> </p>
<ul>
<li> <a href="#">更改管理密码 </a> </li>
<li> <a href="#">更改管理账号 </a> </li>
<li> <a href="#">退出管理 </a> </li>
</ul>
</div>
</div>
<div id="rights"> </div>
</div>
<div style="clear: both;"></div>
<div id="foots"> </div>
</div>
</body>
xuexijava 2010-01-04
- 打赏
- 举报
已解决。。。
IE6 Bug Float后margin加倍。。。。。
IE6 Bug Float后margin加倍。。。。。
