首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

为什么在FF里DIV的内容重叠了呢,该如何解决

2012-03-01 
为什么在FF里DIV的内容重叠了呢!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.01Transitional//EN http://www.w

为什么在FF里DIV的内容重叠了呢
<!DOCTYPE   HTML   PUBLIC   "-//W3C//DTD   HTML   4.01   Transitional//EN "   "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd ">
<HTML   xmlns= "http://www.w3.org/1999/xhtml ">
<HEAD>
<TITLE> xx论坛 </TITLE>
<META   http-equiv=Content-Type   content= "text/html;   charset=gb2312 ">
<META   content= "MSHTML   6.00.3790.2858 "   name=GENERATOR>
<style>
BODY{
text-align:center;
margin:0   auto;
font-size:12px;
color:#444444;
font-family:   Arial,   Helvetica,   sans-serif;
background-color:#FFF;
line-height:1.5em;
}
FORM   {
PADDING-RIGHT:   0px;   PADDING-LEFT:   0px;   PADDING-BOTTOM:   0px;   MARGIN:   0px;   PADDING-TOP:   0px
}
A   IMG   {
BORDER-RIGHT:   0px;   BORDER-TOP:   0px;   BORDER-LEFT:   0px;   BORDER-BOTTOM:   0px
}
INPUT   {
PADDING-RIGHT:   0px;
PADDING-LEFT:   0px;
PADDING-BOTTOM:   0px;
MARGIN:   0px;
PADDING-TOP:   0px;
}
SELECT   {
PADDING-RIGHT:   0px;
PADDING-LEFT:   0px;
PADDING-BOTTOM:   0px;
MARGIN:   0px;
PADDING-TOP:   0px;
z-index:0;
}
TEXTAREA{
PADDING-RIGHT:   0px;
PADDING-LEFT:   0px;
PADDING-BOTTOM:   0px;
MARGIN:   0px;
PADDING-TOP:   0px;
}
DL,DT,DD{
margin:0px;
padding:0px;
background:transparent;
}
DIV{
margin:0   auto;
}
UL,LI{
margin:0px;
padding:0px;
list-style:none;
}
SPAN{
padding:0;
margin:0;
}
/***********************/

/*****HEADER   START******/
.HEADER{
color:#666666;
width:960px;
height:60px;
z-index:1;
margin-bottom:12px;
}
.HEADER   ul{
margin:10px;
}
.HEADER   li{
float:   right;
color:#666666;
cursor:pointer;
padding-top:   30px;
}
/*****HEADER   END********/

/*****FOOTER   START******/
.FOOTER{
width:960px;
padding:   2px;
}
/*****FOOTER   END********/

/*****MODULE   START******/
.MODULE{
width:960px;
border:1px   solid   #C8C8C8;
margin-bottom:12px;
padding:0px;
}
.MODULE_TITLE{
position:relative;
margin-top:2px;
height:25px;
background-repeat:repeat-x;
background-position:center;
cursor:move;
background-image:   url(../Images/bg_title_middle.gif);
}
.TITLE_LEFT{
position:absolute;
left:0px;
top:4px;
font-weight:   bold;
padding-left:   10px;
}
.TITLE_RIGHT{
position:absolute;
right:-1px;
top:4px;
padding-right:3px;
}
.MODULE_CONTENT{
}
/*****MODULE   END********/

/*****FORUMLIST   START********/
.FORUMLIST_TITLE{
height:20px;
margin-bottom:5px;
}
.FORUMLIST_TITLE   li{
float:left;
height:20px;
padding-top:5px;
font-weight:bold;
}
.FORUMLIST{
height:10px;
}
.FORUMLIST   li{
float:left;
height:40px;
}
/*****FORUMLIST   END********/

/*****FORUMSTATE   START*********/
.FORUMIMAGELIST{
width:320px;


border:1px   solid   #C8C8C8;
height:50px;
margin-bottom:15px;
}
.FORUMIMAGELIST   li{
float:left;
margin:10px;
}
/*****FORUMSTATE   END*********/
</style>
</HEAD>

<BODY>
<DIV   class=HEADER>
<UL>
<LI   onclick=javascript:> 博客&nbsp;&nbsp;   </LI>
<LI   onclick=javascript:Default()> 默认版面&nbsp;|&nbsp;   </LI>
<LI   onClick= "javascript:location.href= 'Search.html ' "> 资源搜索&nbsp;|&nbsp;   </LI>
<LI   onClick= "location.href= 'Register.html ' "> 用户注册&nbsp;|&nbsp;   </LI>
<LI   onClick= "location.href= 'Register.html ' "> 用户登陆&nbsp;|&nbsp;   </LI>
<LI   onClick= "location.href= '../Index1.html ' "> MyWeb首页&nbsp;|&nbsp;   </LI>
</UL>
</DIV>

<DIV   class=MODULE   id=1>
<DIV   class=MODULE_TITLE   onMouseDown= "DragStart(event, '1 ') "   id=1_Title> <SPAN  
class=TITLE_LEFT> ≡商友俱乐部≡ </SPAN>   <SPAN   class=TITLE_RIGHT> <IMG   id=1_Lock   title=锁定  
style= "CURSOR:   pointer "   onClick= "ck( '1 ') "   height=13   src= "xx论坛_files/unlock.gif "  
width=13>   <IMG   id=1_Size   title=最小化   style= "CURSOR:   pointer "   onClick= "cm( '1 ') "  
height=13   src= "xx论坛_files/max.gif "   width=13>   <IMG   style= "CURSOR:   pointer "  
onclick= "ce( '1 ') "   height=13   src= "xx论坛_files/icon_close.gif "   width=13>  
</SPAN> </DIV>
<DIV   class=MODULE_CONTENT   id=1_Content>
<DIV   class=FORUMLIST_TITLE>
<UL>
<LI   style= "PADDING-LEFT:   70px;   WIDTH:   65%;   TEXT-ALIGN:   left "> 论坛   </LI>
<LI   style= "WIDTH:   5% "> 主题   </LI>
<LI   style= "WIDTH:   5% "> 贴数   </LI>
<LI   style= "WIDTH:   9% "> 最后发表   </LI>
<LI   style= "WIDTH:   8% "> 版主   </LI> </UL> </DIV>
<DIV   class=FORUMLIST>
<UL>
<LI  
style= "PADDING-RIGHT:   10px;   PADDING-LEFT:   10px;   WIDTH:   3%;   PADDING-TOP:   4px "> <IMG  
title=有新的贴子   height=24   src= "xx论坛_files/forumNew.gif "   width=22>   </LI>
<LI  
style= "PADDING-LEFT:   18px;   WIDTH:   62%;   TEXT-ALIGN:   left "> 『&nbsp; <B> 网店系统搜索引擎优化(浩维互动支持) </B> &nbsp;』 <BR> &nbsp;&nbsp;讨论网店搜索引擎优化经验与技巧,由专业SEO公司浩维互动提供支持;  
</LI>
<LI   style= "WIDTH:   4%;   PADDING-TOP:   2px;   TEXT-ALIGN:   center "> <IMG   height=32  
src= "xx论坛_files/icon_1_1.gif "   width=32>   </LI>
<LI   style= "WIDTH:   4%;   PADDING-TOP:   10px;   TEXT-ALIGN:   center "> 0   </LI>
<LI   style= "WIDTH:   5%;   PADDING-TOP:   10px;   TEXT-ALIGN:   center "> 0   </LI>


<LI   style= "WIDTH:   8%;   PADDING-TOP:   10px;   TEXT-ALIGN:   center "> asdf   </LI>
<LI   style= "WIDTH:   9%;   PADDING-TOP:   10px;   TEXT-ALIGN:   center "> 管理员   </LI>
</UL>
</DIV>
</DIV>
</DIV>


<DIV   class=MODULE   id=onLineMember>
<DIV   class=MODULE_TITLE   onMouseDown= "DragStart(event, 'onLineMember ') "  
id=onLineMember_Title>
<SPAN   class=TITLE_LEFT> ≡在线人数≡ </SPAN>
<SPAN   class=TITLE_RIGHT> <IMG   id=onLineMember_Lock   title=锁定   style= "CURSOR:   pointer "  
onclick= "ck( 'onLineMember ') "   height=13   src= "xx论坛_files/unlock.gif "  
width=13> &nbsp; <IMG   id=onLineMember_Size   title=最小化   style= "CURSOR:   pointer "  
onclick= "cm( 'onLineMember ') "   height=13   src= "xx论坛_files/max.gif "  
width=13> &nbsp; <IMG   style= "CURSOR:   pointer "   onClick= "ce( 'onLineMember ') "  
height=13   src= "xx论坛_files/icon_close.gif "   width=13>
</SPAN>
</DIV>
<DIV   class=MODULE_CONTENT   id=onLineMember_Content>
<UL>
<LI   style= "MARGIN-LEFT:   10px;   TEXT-ALIGN:   left "> 紫岩   </LI>
<LI   style= "MARGIN-LEFT:   10px;   TEXT-ALIGN:   left "> 紫岩   </LI>
<LI   style= "MARGIN-LEFT:   10px;   TEXT-ALIGN:   left "> 紫岩   </LI>
<LI   style= "MARGIN-LEFT:   10px;   TEXT-ALIGN:   left "> 紫岩   </LI>
<LI   style= "MARGIN-LEFT:   10px;   TEXT-ALIGN:   left "> 紫岩   </LI>
</UL>
</DIV>
</DIV>
<div   id= "forumImage "   class= "FORUMIMAGELIST ">
<ul>
<li> <img   src= "Images/forumNew.gif "   width= "22 "   height= "24 "   /> 有新的贴子 </li>
<li> <img   src= "Images/forumNone.gif "   width= "22 "   height= "24 "   /> 无新的贴子 </li>
<li> <img   src= "Images/forumLock.gif "   width= "22 "   height= "24 "   /> 被锁定论坛 </li>
</ul>
</div>

<DIV   class=FOOTER> MyWeb.com.cn   &copy;   2007   版权所有   不得转载   京ICP证000000号   网络110报警   </DIV>
</BODY>
</HTML>


这一句话“讨论网店搜索引擎优化经验与技巧,由专业SEO公司浩维互动提供支持........................”

老是在外面,这个DIV的样式属性应该怎么样设置???

[解决办法]
上面的代码发给你了,给你改了一下,IE和FF都正常.因为FF下不支持Div随内容自动使用高度,所以.FORUMLIST这个类(就是内容层叠的那个)必须设置一个适当的高度来使用内容
[解决办法]
.MODULE:after {content: ". ";display:block;height:0;clear:both;visibility:hidden;}
*html .MODULE{height:0;}
.MODULE{display:inline-table;}
.MODULE{display:block;}
把这段css加上去,就没有问题了
[解决办法]
在下面加个 clear清理一下浮动
<LI style= "WIDTH: 9%; PADDING-TOP: 10px; TEXT-ALIGN: center "> 管理员 </LI>


</UL>
</DIV>
<br style= "clear:both " />

热点排行