DIV+CSS布局，在不同浏览器下的颜色问题
0
悬赏园豆：30
[已解决问题]
解决于 2010-07-12 11:04
以下代码在IE和火狐不同，我需要IE下的效果，请大家指明原因并提供解决方案
代码
body
{
margin: 0px;
font-size: 12px;
background-color: #708ba3;
}
#b_container
{
width:1000px;
margin:0px auto;
background-color: #ffffff;
}
#main
{
width:990px;
margin:0px auto 0px auto;
background-color: #ffffff;
}
#main_left
{
float:left;
width:746px;
background-color:Red;
}
#main_right
{
float:left;
width:244px;
height:500px;
background-color:Blue;
}
代码
<!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>
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link rel="Stylesheet" type="text/css" href="css/my.css" />
</head>
<body>
<div id="b_container">
<div id="main">
<div id="main_left">
aaaaaaaaa
</div>
<div id="main_right">
gggggggggs
</div>
</div>
</div>
</body>
</html>
效果分别为：
IE：
火狐：
在IE下面，main的白色背景出来了，在火狐中没有，我需要IE的效果，谢谢
最佳答案
0
加一个<div style="clear:both"/>，代码如下：
<!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>
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link rel="Stylesheet" type="text/css" href="css/my.css" />
</head>
<body>
<div id="b_container">
<div id="main">
<div id="main_left">
aaaaaaaaa
</div>
<div id="main_right">
gggggggggs
</div>
<div style="clear:both"/>
</div>
</div>
</body>
</html>
收获园豆：15
谢谢老大，可以了，能不能介绍下原因呢
@Fencer:你了解一下clear:both的相关知识。
其他回答(2)
0
这要看你的代码是怎么写的，如果是用JQuery给层加的效果一般是没什么问题的，因为它已经解决了浏览器兼容问题，但是如果用JS或者一般的 #id名称{font-size:12px;...}这样做的话可能就有问题了，因为有的浏览器识别有的浏览器不识别，你加我QQ，我发一份文档给你看一下。332990470，记得写明你加我的原因！
我就是DIV+CSS布局，你提供我需要效果的代码就是，谢谢
0
给b_container加overflow: hidden;试试，应该是float的关系
收获园豆：15
谢谢，可以了，能不能介绍下原因呢
@Fencer:HTML一共有3条流，分别为没有float没有position的文档流，用了float的浮动流，用了position:relative/absolute的定位流
三条流之间的布局有相对的独立性，在你的问题中，b_container是文档流，里面的内容是浮动流，因此b_container计算高度时不把浮动流的内容考虑进去，所以自身高度是0
@Gray Zhang:专业，经典，佩服
