问题:
IE:将根据内容的高度变化,包括未定义高度的图片内容,即使定义了高度,当内容超过高度时,将使用实际高度
Firefox:没有定义高度时,如果内容中包括了图片内容,MF的高度解析是根据印刷标准,这样就会造成和实际内容高度不符合的 情况;当定义了高度,但是内容超过高度时,内容会超出定义的高度,但是区域使用的样式不会变化,造成样式错位。
解决方法:
<div class="main">
<div class="content">
</div>
</div>
css-----------
.main{width: 150px; background-color: #ffff66;padding:10px 0 0 0;}
.content{width: 140px;height: 50px; background-color: #00ff33;float: left;}
在IE中显示正常,但是在 Firefox中外面的层不能自动适应内层的高度。(为了在Firefox中显示部分外层背景,我加入了10px 0 0 0;)
修改方法1:(添加新层)
<div class="main">
<div class="content">
</div>
<div style="clear: both;display:block;">
</div>
修改方法2:(修改css)
.main{width: 150px; background-color: #ffff66;padding:10px 0 0 0; float: left;}
.content{width: 140px;height: 50px; background-color: #00ff33;float: left;}
(备注:在IE7,Firefox3.0.1中测试通过)
IE:将根据内容的高度变化,包括未定义高度的图片内容,即使定义了高度,当内容超过高度时,将使用实际高度
Firefox:没有定义高度时,如果内容中包括了图片内容,MF的高度解析是根据印刷标准,这样就会造成和实际内容高度不符合的 情况;当定义了高度,但是内容超过高度时,内容会超出定义的高度,但是区域使用的样式不会变化,造成样式错位。
解决方法:
<div class="main">
<div class="content">
</div>
</div>
css-----------
.main{width: 150px; background-color: #ffff66;padding:10px 0 0 0;}
.content{width: 140px;height: 50px; background-color: #00ff33;float: left;}
在IE中显示正常,但是在 Firefox中外面的层不能自动适应内层的高度。(为了在Firefox中显示部分外层背景,我加入了10px 0 0 0;)
修改方法1:(添加新层)
<div class="main">
<div class="content">
</div>
<div style="clear: both;display:block;">
</div>
修改方法2:(修改css)
.main{width: 150px; background-color: #ffff66;padding:10px 0 0 0; float: left;}
.content{width: 140px;height: 50px; background-color: #00ff33;float: left;}
(备注:在IE7,Firefox3.0.1中测试通过)