修改CSS代码兼容浏览器

这CSS代码在IE6里看着没事，在FirFox中就不行，谁能帮我改一下，让FF中看着效果和IE6里一样就行。（以IE6效果为准）主要就是两个问题，一个是PageBody中... 这CSS代码在IE6里看着没事，在FirFox中就不行，谁能帮我改一下，让FF中看着效果和IE6里一样就行。（以IE6效果为准）
主要就是两个问题，一个是PageBody中如果不设float:left在FF中就显示不出来，设上以后又不能居中。
二就是Sidebar侧边栏有初使高度，如果换行多，超出高度时在IE6可以自适应，但在FF中就行不了。

以下是代码，希望有兄弟能帮一把。

页面代码：
<!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>
<meta http-equiv="Content-Tyep" content="text/html; charset=gb2312" />
<title>页面</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>

<body>
<CENTER>
<div id="container"><!--页面层容器-->
<div id="Header">Header</div>
<div id="PageBody"><!--页面主体-->
<div id="Sidebar"><!--侧边栏-->侧边栏1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br /></div>
<div id="MainBody"><!--主体内容-->主主主主主主主主主主主主主主主主主主体内容 </div>
<div id="MainBody1"><!--主体内容-->主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 </div>
<div id="MainBody1"><!--主体内容-->主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 </div>
<div id="MainBody1"><!--主体内容-->主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 </div>
</div>
<div id="Footer">Footer</div>
</div>

</CENTER>
</body>

</html>

Css代码：

/*基本信息*/
body{font:12px Tahoma;background:#FFFFFF;}

/*页面层容器*/
#container{background:#000;}

/*页面头部*/
#Header{text-align:center;width:800px;margin-left:auto;margin-right:auto;margin-top:0px;height:100px;background:#ffcc99;border:#0000FF 1px solid}

/*页面主体*/
#PageBody{text-align:left;margin-left:auto;margin-right:auto;width:800px;margin-top:1px;background:#ccff00}

/*侧边栏*/
#Sidebar{width:160px;margin:2px 2px 2px 0px;background:#00ff00;float:left;height:100px}

/*主体内容*/
#MainBody{width:314px;margin:2px;height:auto;background:#00ffcc;float:left}
#MainBody1{width:314px;margin:2px;background:#ffffcc;float:left}

/*页面底部*/
#Footer{clear:both;margin-left:auto;margin-right:auto;width:800px;margin-top:2px;height:50px;background:#00ffff;float:top}
绯色心情谢谢你，第一个居中的问题已经解决了。
但是第二个Sidebar侧边栏如果设定初始高度的问题你并没有解决，你把高度改成了auto，可以自适应，但我是希望无论有没有内容，那个侧边栏都有一定的高度，如果内容多过高度，就自适应。
希望大家帮个忙，谢谢了。 展开
 我来答
5个回答
#热议# 生活中有哪些实用的心理学知识？
百度网友2adfbec36
2009-02-04 · TA获得超过790个赞
知道答主
回答量：256
采纳率：0%
帮助的人：218万
我也去答题访问个人页
展开全部
正常情况下我们是以FF为标准进行设计,如果你一开始就以IE6为准进行设计,你就错了,因为IE6的BUG太多了,我个人设计时一般只考虑IE6 ,IE7 FF等浏览器,最开始以FF设计,设计好了后再去修复IE6的BUG.比如:
FF:<div style="float:left;"></div><div style="float:left;margin-left:10px;" class="bug"></div>
此时在ie6绝对变形.
这个时候可以在ie6里面加这么个
* html .bug{display:inline;}
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
绯色心情
2009-02-02 · TA获得超过124个赞
知道答主
回答量：55
采纳率：0%
帮助的人：78.7万
我也去答题访问个人页
展开全部
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
/*基本信息*/
*{ margin: 0 auto;}
body{font:12px Tahoma; width:800px; }

/*页面层容器*/
#container{background:#000;}

/*页面头部*/
#Header{text-align:center;width:800px;margin-left:auto;margin-right:auto;margin-top:0px;height:100px;background:#ffcc99;border:#0000FF 1px solid}

/*页面主体*/
#PageBody{ text-align:left; width:800px; background:#ccff00; float: left; margin-top: 1px; }

/*侧边栏*/
#Sidebar{width:160px;margin:2px 2px 2px 0px;background:#00ff00;float:left;height:auto;}

/*主体内容*/
#MainBody{width:314px;margin:2px;height:auto;background:#00ffcc;float:left}
.MainBody1{width:314px;margin:2px;background:#ffffcc;float:left; height:auto;}

/*页面底部*/
#Footer{clear:both;margin-left:auto;margin-right:auto;width:800px;margin-top:2px;height:50px;background:#00ffff;float:top}
-->
</style>
</head>

<body>
<div id="container"><!--页面层容器-->
<div id="Header">Header</div>
<div id="PageBody"><!--页面主体-->
<div id="Sidebar"><!--侧边栏-->侧边栏1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br /></div>
<div id="MainBody"><!--主体内容-->主主主主主主主主主主主主主主主主主主体内容 </div>
<div class="MainBody1"><!--主体内容-->主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 </div>
<div class="MainBody1"><!--主体内容-->主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 </div>
<div class="MainBody1"><!--主体内容-->主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 </div>
</div>
<div id="Footer">Footer</div>
</div>

</body>
</html>

没改太多，做了点小修改，没有太大的变动，你试着体会一下吧。

其实没必要，你只是想的太复杂了，你完全可以用回车来撑高它的高度啊，这样既有高度，又不会显示东西，DIV这个东西既有它的严谨性，又有它的自由度，可以任你自由的发挥。DIV+CSS这种布局有很多BUG的，都可以用<br />来解决的。
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
zhu370853368
2009-02-03 · 超过23用户采纳过TA的回答
知道答主
回答量：249
采纳率：0%
帮助的人：104万
我也去答题访问个人页
展开全部
<!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>
<meta http-equiv="Content-Tyep" content="text/html; charset=gb2312" />
<title>页面</title>
<style type="text/css">
<!--
/*基本信息*/
body{font:12px Tahoma;background:#FFFFFF;}

/*页面层容器*/
#container{background:#000;}

/*页面头部*/
#Header{text-align:center;width:800px;margin-left:auto;margin-right:auto;margin-top:0px;height:100px;background:#ffcc99;border:#0000FF 1px solid}

/*页面主体*/
#PageBody{ text-align:left; width:800px; background:#ccff00; margin-top: 1px; margin-left:auto; margin-right:auto; overflow:auto}

/*侧边栏*/
#Sidebar{width:160px;margin:2px 2px 2px 0px;background:#0F0;float:left;height:auto!important;height:100px;min-height:100px;}
/*主体内容*/
#MainBody{width:314px;margin:2px;height:auto;background:#00ffcc;float:left}
#MainBody1{width:314px;margin:2px;background:#ffffcc;float:left}

/*页面底部*/
#Footer{clear:both;margin-left:auto;margin-right:auto;width:800px;margin-top:2px;height:50px;background:#00ffff;float:top}
-->
</style>
</head>

<body>
<CENTER>
<div id="container"><!--页面层容器-->
<div id="Header">Header</div>
<div id="PageBody"><!--页面主体-->
<div id="Sidebar"><!--侧边栏-->侧边栏1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br /></div>
<div id="MainBody"><!--主体内容-->主主主主主主主主主主主主主主主主主主体内容 </div>
<div id="MainBody1"><!--主体内容-->主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 </div>
<div id="MainBody1"><!--主体内容-->主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 </div>
<div id="MainBody1"><!--主体内容-->主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 </div>
</div>
<div id="Footer">Footer</div>
</div>

</CENTER>
</body>

</html>

参考资料： http://www.popoppo.com

已赞过 已踩过<
你对这个回答的评价是？
评论 收起
nono170
2009-02-01 · TA获得超过194个赞
知道答主
回答量：426
采纳率：0%
帮助的人：0
我也去答题访问个人页
展开全部
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Div + CSS Example, Wayhome's Blog</title>
<style type="text/css">
<!--
#wrap{overflow:hidden;}
#sidebar_left,#sidebar_right{padding-bottom:100000px;margin-bottom:-100000px;}
-->
</style></head>

<body>
<div id="wrap" style="width:300px; background:#FFFF00;">
<div id="sidebar_left" style="float:left;width:100px; background:#FF0000;">Left</div>
<div id="sidebar_mid" style="float:left;width:100px; background:#666;">
Middle<br />
Middle<br />
Middle<br />
Middle<br />
Middle<br />
Middle<br />
Middle<br />
Middle<br />
Middle<br />

</div>
<div id="sidebar_right" style="float:right;width:100px; background:#0000FF;">Right</div>
</div>
</body>
</html>
这是在平时搜集的东西,你可以看看,希望对你有帮助!呵呵
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
fushou_fish
2009-02-02 · TA获得超过232个赞
知道答主
回答量：20
采纳率：0%
帮助的人：15.3万
我也去答题访问个人页
展开全部
/*侧边栏*/
#Sidebar{width:160px;margin:2px 2px 2px 0px;background:#0F0;float:left;height:auto!important;height:100px;min-height:100px;}
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
收起 更多回答（3）
推荐律师服务： 若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

为你推荐：

下载百度知道APP，抢鲜体验
使用百度知道APP，立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

京ICP证030173号-1   京网文【2023】1034-029号     ©2024Baidu  使用百度前必读 | 知道协议 | 企业推广

辅 助

模 式