首页 新闻 搜索 专区 学院

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的效果,谢谢

Fencer的主页 Fencer | 初学一级 | 园豆:7
提问于:2010-07-12 08:56
< >
分享
最佳答案
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
dudu | 高人七级 |园豆:36985 | 2010-07-12 10:09
谢谢老大,可以了,能不能介绍下原因呢
Fencer | 园豆:7 (初学一级) | 2010-07-12 10:39
@Fencer:你了解一下clear:both的相关知识。
dudu | 园豆:36985 (高人七级) | 2010-07-12 10:43
其他回答(2)
0

这要看你的代码是怎么写的,如果是用JQuery给层加的效果一般是没什么问题的,因为它已经解决了浏览器兼容问题,但是如果用JS或者一般的  #id名称{font-size:12px;...}这样做的话可能就有问题了,因为有的浏览器识别有的浏览器不识别,你加我QQ,我发一份文档给你看一下。332990470,记得写明你加我的原因!

第一印象 | 园豆:79 (初学一级) | 2010-07-12 09:13
我就是DIV+CSS布局,你提供我需要效果的代码就是,谢谢
支持(0) 反对(0) Fencer | 园豆:7 (初学一级) | 2010-07-12 09:27
0

给b_container加overflow: hidden;试试,应该是float的关系

收获园豆:15
Gray Zhang | 园豆:17610 (专家六级) | 2010-07-12 09:47
谢谢,可以了,能不能介绍下原因呢
支持(0) 反对(0) Fencer | 园豆:7 (初学一级) | 2010-07-12 10:39
@Fencer:HTML一共有3条流,分别为没有float没有position的文档流,用了float的浮动流,用了position:relative/absolute的定位流 三条流之间的布局有相对的独立性,在你的问题中,b_container是文档流,里面的内容是浮动流,因此b_container计算高度时不把浮动流的内容考虑进去,所以自身高度是0
支持(0) 反对(0) Gray Zhang | 园豆:17610 (专家六级) | 2010-07-12 11:23
@Gray Zhang:专业,经典,佩服
支持(0) 反对(0) 第一印象 | 园豆:79 (初学一级) | 2010-07-12 14:55
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册