Firefox 浮动层背景图不能自动平铺(困惑)

嵌套 DIV,当子div 为浮动(float)时,父div 的高度在Firefox 不能根据子DIV 自动变化
问题浏览器:Firefox、Opera。如:

<div id="parent">
<div id="content">
hello
</div>
</div>

他们说,浏览器的高度不能自动计算,导致的结果是父类的Div有背景和背景图片的时候不能自动平铺。

这个我不懂得理解,就先记下来(下面是我的理解做滴):

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>css test</title>
<style type="text/css">
#content
{
width
:400px;
height
:200px;
border
:1px solid blue;
float
:left;
}

#parent
{
background
:red;
width
:400px;
background-image
:url(../images/hjj2.jpg);
}

.clear.after
{
content
:".";
display
:block;
height
:0;
clear
:both;
visibility
:hidden;
}
</style>
</head>

<body>
<div id="parent" class="clear">
<div id="content">
hello
</div>
</div>
</body>
</html>

后面的在加了个clear,这个是他们说的解决方法。

posted @ 2011-07-24 10:26  小霖2012  阅读(258)  评论(0编辑  收藏  举报