有关于margin的一点东西！

aries 发表于 2008-09-29 分类于 PHP 2480 次浏览标签 : css margin firefox

这里我要说一下css外容器margin的问题！

先看看下面的例子，

<!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>Demo-1</title>

<style type="text/css">

#wrapper{border:1px #999 solid; width:600px; margin-bottom:20px;}

.left{width:300px; float:left; height:100px; background:red;}

.right{width:300px; float:left; height:300px; background:#ccc;}

#footer{clear:both;width:600px;height:20px; background:#000;border:1px solid #ccc;}

</style>

</head>

<body>

<div id="wrapper">

      <div class="left"></div>

    <div class="right"></div>

</div>

<div id="footer"></div>

</body>

</html>

这是一个很简单的布局，注意我在#wrapper里面加上了margin-bottom:20px;

这个页面在IE6下是没有问题的！

但是firefox下却出了问题，margin-bottom根本就没起作用！

如何解决呢？如下，

#wrapper{border:1px #999 solid; width:600px; margin-bottom:20px;overflow:hidden;}

加上overflow:hidden;就可以了

3条评论