15
2008
01

css三栏布局浏览器兼容问题

   刚刚用CSS布局制作了一个网页,但在做的过程中确发现一些问题,令人不甚有些头痛.当自己完成好整个完整的网站,心情还沉醉在喜悦中的时候,却发现在同事机器上看到的确实一个乱七八遭的页面。这才发现CSS浏览器兼容问题.

    在用CSS+DIV做三栏布局时,设置两边宽度固定,中间自动适应的时候会出现一个这样的问题,如果中间的栏也给他固定宽度的时候就会在IE6.0以下浏览器中出现中间栏断行的问题.IE7.0和火狐最新版本不会这样子.找了个把小时终于解决。
    下面跟大家分享下网上得到的实例代码跟大家分享下.
 

CSS部分:

body {
 font-family: Verdana, Arial;
 margin: 0;
 font-size: 12px;
}
#dyhead {
 margin-bottom: 5px;
 }
#dyleft {
 float: left;
 width: 200px;
 }
#dycenter {
 margin: 0 210px;
}
#dyright {
 float: right;
 width: 200px;
}
#dyfoot {
 margin-top: 5px;
 clear: both;
}
div {
 background-color: #eee;
 border: dotted 1px green;
}

 

先写#dyleft和#dyright两栏,避免#dycenter自动断行

 

XHTML部分:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="飘零雾雨|edzmaster@gmail.com" />
<title>Css Layout</title>
</head>
<body>
<div id="dyhead">头部(3列布局,左右两栏宽度固定,中间栏自适应宽度)</div>
<div id="dyleft">左栏固定宽度为200px</div>
<div id="dyright">右栏固定宽度为200px</div>
<div id="dycenter">中间自适应宽度</div>
<div id="dyfoot">底部</div>
</body>
</html>

« 上一篇下一篇 »

相关文章:

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)

再写CSS三栏布局  (2008-2-29 0:48:12)

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

网站即将改版  (2008-2-24 23:47:48)

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

评论列表:

发表评论:

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