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

DIV+CSS布局IE8和IE6的浮动层间距不同()

2012-10-19 
DIV+CSS布局IE8和IE6的浮动层间距不同(求助)弄了很久了,间距总是调不正确,谁能帮忙看一下,谢谢了!HTML cod

DIV+CSS布局IE8和IE6的浮动层间距不同(求助)
弄了很久了,间距总是调不正确,谁能帮忙看一下,谢谢了!

HTML code
<!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><title>文库</title><link rel="stylesheet" href="css/style.css" type="text/css"></link><script type="text/javascript"><!--//--></script></head>    <body>      <div class="top">          <a href="#">daichangfu</a>&nbsp;欢迎登陆&nbsp;| <a href="#">我的文库</a> | <a href="">我的消息</a> | <a href="#">退出</a>      </div>    <div class="main">        <div class="search">            文档搜索        </div>        <div class="menu">分类导航</div>                <div class="type">全部文档分类</div>        <div class="right">            <div class="right_x" style="height: 150px">公告</div>            <div class="right_x" style="height: 300px">阅读排行榜</div>            <div class="right_x" style="height: 300px">下载排行榜</div>        </div>        <div class="hot">热门推荐</div>        <div class="type_x">详细分类</div>        <div class="type_x">详细分类</div>    </div>    <div class="bottom">底部</div>  </body></html>

CSS code
body{    }.top{    margin-right: 10px;    /*border: 1px solid blue;*/    text-align: right;    font-size: 15px;}.bottom{    margin: auto;    margin-top: 10px;    width: 1000px;    height: 100px;    border: 1px solid red;    text-align: center;}.main{    margin: auto;    margin-top: 10px;    width: 1000px;    text-align: center;}.search{    width: 100%;    height: 75px;    border: 1px solid blue ;}.menu{    margin-top: 10px;    width: 100%;    height: 35px;    border: 1px solid green;}.type{    margin-top: 10px;    width: 100px;    height: 350px;    float: left;    background: green;}.hot{    margin-top: 10px;    margin-left: 110px;    width: 650px;    height: 350px;    background: green;}.right{    float: right;    width: 230px;}.right_x{    margin-top: 10px;    width: 100%;    background: green;}.type_x{    margin-top: 10px;    width: 760px;    height: 350px;    background: green;}


[解决办法]
HTML code
<!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><link rel="stylesheet" href="css/style.css" type="text/css"></link><style type="text/css"><!--body{}.top{    margin-right: 10px;    /*border: 1px solid blue;*/    text-align: right;    font-size: 15px;}.bottom{    margin: auto;    margin-top: 10px;    width: 1000px;    height: 100px;    border: 1px solid red;    text-align: center;}.main{    margin: auto;    margin-top: 10px;    width: 1000px;    text-align: center;}.search{    width: 100%;    height: 75px;    border: 1px solid blue ;}.menu{    margin-top: 10px;    width: 100%;    height: 35px;    border: 1px solid green;}.type{    margin-top: 10px;    width: 100px;    height: 350px;    float: left;    background: green;}.hot{    margin-top: 10px;        width: 650px;    height: 350px;    background: green;    float:right;}.right{    float: right;    width: 230px;}.left{    float: left;    width: 760px;}.right_x{    margin-top: 10px;    width: 100%;    background: green;}.type_x{    margin-top: 10px;    width: 760px;    height: 350px;    background: green;    float:left;    }//--></style></head>    <body>      <div class="top">          <a href="#">daichangfu</a>&nbsp;欢迎登陆&nbsp;| <a href="#">我的文库</a> | <a href="">我的消息</a> | <a href="#">退出</a>  </div>    <div class="main">        <div class="search">            文档搜索        </div>        <div class="menu">分类导航</div>                <div class="right">            <div class="right_x" style="height: 150px">公告</div>            <div class="right_x" style="height: 300px">阅读排行榜</div>            <div class="right_x" style="height: 300px">下载排行榜</div>        </div>                <div class="left">        <div class="type">全部文档分类</div>        <div class="hot">热门推荐</div>        <div class="type_x">详细分类</div>        <div class="type_x">详细分类</div>        </div>        <div style="clear:both;"></div>    </div>    <div class="bottom">底部</div></body></html> 


[解决办法]
不清楚你问的是什么?是这种吗?
HTML:
<!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>
<link rel="stylesheet" href="style.css" type="text/css"></link>
<script type="text/javascript">
<!--

//-->
</script>
</head>
  
<body>
 
<div class="main">
<div class="top">
<a href="#">于海滨</a>&nbsp;|欢迎登陆&nbsp;| <a href="#">我的文库</a> | <a href="">我的消息</a> | <a href="#">退出</a>
</div>
<div class="search">
文档搜索
</div>
<div class="menu">分类导航</div>

<div class="type">全部文档分类</div>

<div class="right">
<div class="right_x" style="height: 150px">公告</div>
<div class="right_x" style="height: 300px">阅读排行榜</div>
<div class="right_x" style="height:600px">下载排行榜</div>
</div>
<div class="hot">热门推荐</div>
<div class="type_x">详细分类</div>
<div class="type_x">详细分类</div>
</div>
<div class="bottom">底部</div>
</body>
</html>


CSS:
@charset "utf-8";
body{

}
.top{
margin-right: 10px;
/*border: 1px solid blue;*/
text-align: right;
font-size: 15px;
}
.bottom{
margin: auto;
margin-top: 10px;
width: 1000px;
height: 100px;
border: 1px solid red;
text-align: center;
}
.main{
margin: auto;
margin-top: 10px;
width: 1000px;
text-align: center;
}
.search{
width: 100%;
height: 75px;
border: 1px solid blue ;
}
.menu{
margin-top: 10px;
width: 100%;
height: 35px;
border: 1px solid green;
}
.type{
margin-top: 10px;
width: 100px;
height: 350px;
float: left;
background: green;
}
.hot{
margin-top: 10px;
margin-left: 110px;
width: 650px;
height: 350px;
background: green;
}
.right{
float: right;
width: 230px;
}
.right_x{
margin-top: 10px;
width: 100%;
background: green;
}
.type_x{
margin-top: 10px;
width: 760px;
height: 350px;
background: green;
}

热点排行