float和height出现在2个相邻div时出现的奇怪问题

0 0

float和height出现在2个相邻div时出现的奇怪问题5

<html>
	<head>
		<title>2个div之间的间隔</title>
		<style type="text/css">
			body {background-color: #ddd;}
      #leftsider{
        border:red 1px solid;
        float:left;
        width:100px;
        height:500px;
      }
      #rightsider{
        border:green 5px solid;
       [b] height:100px;[/b]
      }
		</style>
	</head>
	<body>
		<div id="leftsider">这里是左边</div>
		<div id="rightsider">这里是右边</div>
	</body>
</html>

预览效果发现2个DIV中间出现一个空白缝隙，当删除#rightsider中的height:100px;后得到想要的效果，不删除的情况为什么会有空白出现呢？

CSS

2009年10月09日 21:34

deniselzg
25
0 0 0

3个答案按时间排序按投票排序

0 0

和height:100px没什么关系，主要是
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
的影响，然后再通过position来安排位置

2009年10月10日 16:56

starting
71
0 0 0

添加评论

0 0

IE6的著名3px BUG（断头台bug）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>52css.com</title>
<style type="text/css">

</style>
</head>
<body>
<div id="left">oyksoft.com</div>
<div id="right">oyksoft.com</div>
</body>
</html>

两个层，一个浮动，一个不浮动，把浮动的一个放在不浮动层中，你会发现两个之间有点间隙，宽度为3px。这个问题是最让人头疼的问题了。

解决方法：

1、所有的层都浮动把右边那个层也设置成浮动层就可以消除这可恶的3px间隔
2、给左边的层，应用margin-right:-3px;，同样可解决IE 3px bug.

2009年10月10日 15:22

lovewhzlq
13934
0 0 0

添加评论

0 0

这是著名的IE6 3像素偏移bug。《精通Css》上介绍的比较详细。

如果想看英文的，推荐这篇：
http://www.positioniseverything.net/explorer/threepxtest.html

中文看看这个：
http://www.w3cstandard.com/read.php?5

2009年10月10日 11:27