DIV+CSS布局IE8和IE6的浮动层间距不同（求助）

daichangfu 2011-07-06 10:06:25
弄了很久了，间距总是调不正确，谁能帮忙看一下，谢谢了！

<!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> 欢迎登陆 | <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>



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;

}
...全文
844 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
XX0604 2011-08-31
  • 打赏
  • 举报
 回复
哈哈，ie6有3像素的bug.呵呵，解决这个问题，你需要给div也添加上浮动。
学无止境-逆流而上 2011-08-12
  • 打赏
  • 举报
 回复
不清楚你问的是什么？是这种吗？
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> |欢迎登陆 | <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;
}

咸魚先生 2011-08-12
  • 打赏
  • 举报
 回复
IE6存在双倍边距问题，一楼的方法可行，，不过如此做，你要一点一点的计算机IE6里和其它浏览器里存在多少的距离差异，很麻烦，，，最容易的方法就是在浮动后加上display:inline;清除IE6里的双倍边距，还有教你个小窍门，，两列栏情况下，只要你按效果图上的距离定好宽度，左边的左浮动，右边的右浮动，，如此不再设间隙距离，就不再担心IE6里错位时IE7,IE8里右边还留有间隙
maple910915 2011-07-19
  • 打赏
  • 举报
 回复
貌似神马都看不懂啊 ，还是好好学习吧
mighty_jie 2011-07-18
  • 打赏
  • 举报
 回复 




<!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> 欢迎登陆 | <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>
lijia_415 2011-07-06
  • 打赏
  • 举报
 回复
给父级加个display:inline.
挨踢直男 2011-07-06
  • 打赏
  • 举报
 回复
你可以在ie6的样式前加个 _，如 _padding:11px
这样就只有ie6认得了，不就可以写ie6专用的样式了吗
2周搞定HTML+PS切图+DIV+CSS+移动布局+项目实战
课程特色：课程通俗易懂，实战性非常强，步骤详细，上手简单。 适用人群：非常适合初级学员、在校大学生、实习生，亦或是上班族，对网页制作有浓厚的兴趣，想步入开发殿堂的极客们！掌握基本的、当下流行的前端网页...
DIV+CSS布局
DIV+CSS构建网页，采用层（DIV）布局，并且使用层叠样式表（CSS）来实现页面的外观，给网站浏览者更好的体验。 DIV+CSS布局的优势： 1、表现和内容分离，便于站点重构页面 DIV+CSS模式具有...
网页设计（四）——DIV+CSS布局3
前言：好久没更新过CSDN博客了，现在从原来的OI，变成了一个科研工作者。...DIV+CSS布局 CSS 盒子模型参数设置 在CSS中，可以使用下面的语段示例来设置div的宽度(width)、高度(height)、外边距(margin)、..
DIV+CSS相对IE6、IE7和IE8的兼容问题
DIV+CSS相对IE6、IE7和IE8的兼容问题 DIV+CSS解决IE6，IE7，IE8，FF兼容问题 DIV+CSS解决IE6，IE7，IE8，FF兼容问题 那我来说说吧，做了差不多一年的DIV+CSS，也积累了不少解决兼容问题的方法，我这里只说现在...
不会前端也可以看得懂的3种DIV+CSS布局技术
接下来拿出我的 css 布局笔记，简单阐述下3种DIV+CSS布局技术 虽然说我现在开发基本都是用 flex 啦~ 接下来开始动手实践~ 前期准备 先搭建一个容器，我们可以把每一个div当作一个容器，存放我们需要的内容。 <...
CSS

61,115

社区成员

60,728

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章