29
2008
02

再写CSS三栏布局

CSS三栏布局

为什么是再写呢?以前我在这博客写过三栏布局的文章(http://www.monring.com/post/2008219101824.html),今天在制作过程中,发现了新问题.于是想再写一篇和大家分享一下.

这个问题也是出现在浏览器的兼容性,IE7.0和IE6.0的区别.废话不多讲,先看下IE6.0跟7.0之间的图片的正常效果 查看效果

CSS三栏布局正常效果

这是正常效果.再让我们来看下CSS和XHTML部分

CSS部分很简单(先简单介绍下)

body{
 margin:0px auto;    /* 为整个网页居中对齐 */
 font-family:arial,sans-serif;
 color:#fff;
 font-size:12px;
}

#all {
 width:1002px;
 text-align:center
}

#top {
 background-color:#0099FF;
 width:1002px;
 height:100px;
 margin:0px }

#left {
 background-color:#CCCCCC;
 margin:0px;
 width:316px;
 height:200px;
 float:left;
}

#right {              /* 先写右边部分再写中间部分,为了避免中间断层  */
 background-color:#99CCFF;
 margin:0px;
 width:336px;
 height:200px;
 float:right;
}    

#centerall{
 margin:0px auto;
 float:left;       /*问题就在这条语句,这个FLOAT加上IE7.0为下面(图一)效果,IE6.0正常显示.    而去掉这个FLOAT在IE7.0正常显示了,IE6.0又出现(图二的效果)*/
}

#centerall1{
 background-color:#99CCCC;
 height:100px;
 margin:0px;
}

#centerall2{
 background-color:#996666;
 height:100px;
 margin:0px;
}

#bottom {
 background-color:#0099FF;
 width:1002px;
 height:100px;
}

XHTML部分<!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" lang="gb2312">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<head>
<title>TWOMAN DESIGN</title>
</head>
<body>
<div id="all">
  <div id="top"> top 部分</div>
  <div id="left"> 左边部分 </div>
  <div id="right"> 右边部分 </div>
     <div id="centerall">
        <div id="centerall1"> 中间上部分 </div>
        <div id="centerall2"> 中间下部分 </div>
     </div>
  <div id="bottom"> bottom 部分</div>
</div>
</body>
</html>

 加FLOAT,IE7.0效果(图一)

 不加,IE6.0显示效果(图二)

可以看到效果,就是一条"float:left"引起的浏览兼容问题,IE7.0跟IE6.0的差异很大.同时,我也试过了遨游跟火狐的浏览器,都跟IE7.0的效果一样.如此以来,建议大家还是用7.0,跟上时代.HEHE .

看了上面的CSS代码和图形相信大家都应该明白,如果还不是很清楚,可以点下面的连接在IE6.0和IE7.0下看下效果.

有"float:left"的效果             没有"float:left"的效果

« 上一篇下一篇 »

相关文章:

CSS控制未知高度网页垂直居中  (2008-6-2 16:41:24)

csshoues 用CSS+DIV建造的房屋  (2008-5-28 15:53:1)

div+css命名规则-增强SEO(转)  (2008-4-10 21:46:42)

DIV+CSS网页对网站SEO的五大影响  (2008-3-10 23:45:58)

新主题出炉  (2008-3-7 15:31:12)

W3C机构正式公布HTML5.0草案  (2008-3-3 22:47:7)

Xhtml css网站布局  (2008-2-26 23:20:7)

SEO工具,站长必备  (2008-2-19 22:55:22)

css三栏布局浏览器兼容问题   (2008-1-15 10:18:24)

列表样式书写规范   (2007-12-5 22:29:16)

评论列表:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。