css层的问题,火狐下出错,有谁可以帮忙解决下

来源：百度知道编辑：UC知道时间：2024/09/24 04:24:04

html部分:
<div id="test">
<div class="test_title"><div class="left">1</div><div class="right">2</div></div>
<div class="test_main"><div class="left">1</div><div class="right">2</div></div>
</div>
css部分:
#test{
width:600px;
border:1px solid #CCCCCC;
margin:5px auto;
}

#test .test_title{
width:594px;
margin:3px 3px 0 3px;
background:#0066FF;
}

#test .test_main{
width:594px;
margin:0 3px 3px 3px;
background:#009999;
}

#test .left,#test .right{
float:left;
}

#test .left{
width:94px;
}

#test .right{
width:500px;
}
当没使用下面这句时,两个浏览器都正常,但把left和right两个层对排的时候,IE下正常显示,火狐地下test的外框就不能自动变宽了,有什么办法解决
#test .left,#test .right{

分别给#test .test_main{
width:594px;
height:20px;
margin:0 3px 3px 3px;
background:#009999;
}

#test .test_title{
width:594px;
height:20px;
margin:3px 3px 0 3px;
background:#0066FF;
}加一个高度问题就都解决了
一般要浮动之前都要对其对应的块进行高宽设制，不然问题就多了。（我个人理解）

css中加上
#test .left,#test .right{
float:left;
}
并且html改成如下：
<div id="test">
<div class="test_title">
<div class="left">1</div>
<div class="right">2</div>
<div style="clear:both;"></div>
</div>
<div class="test_main">
<div class="left">1</div>
<div class="right">2</div>
<div style="clear:both;"></div>
</div>
</div>

这个问题是因为IE和FF对浮动的解释不同。解决办法有多种，最常用的就是在父元素结束之前加上<div style="clear:

css的问题？层 CSS 层问题? [ 求助 ] 一个div+css文字与层的排列问题 css中设置层的问题,下拉菜单? 为什么同样的CSS，在IE浏览器和火狐浏览器下的显示效果不一样呢？ firefox中的层浮动问题(div+css) css层相对定位参照点问题 ff下css高度自适应的问题 CSS里的margin在火狐和IE里显示的问题火狐下如何获取未指定高度的层的高度