IE7的web标准之道 Ⅲ - 网页制作

　IE7的web标准之道 Ⅲ

作者：阿一　时间： 2008-08-20　文档类型：转载　来自：JustinYoung's Blog

第 1 页引起页面布局混乱的祸首 [1]
第 2 页引起页面布局混乱的祸首 [2]
第 3 页引起页面布局混乱的祸首 [3]
第 4 页引起页面布局混乱的祸首 [4]
第 5 页引起页面布局混乱的祸首 [5]
第 6 页引起页面布局混乱的祸首 [6]
第 7 页引起页面布局混乱的祸首 [7]
第 8 页引起页面布局混乱的祸首 [8]

再看看下面的这个网页截图，它是我们今天将要使用的例子(源代码在下方有提供)，是一个标准的“上左右下”带侧边栏的虚拟网页。

运行代码框
<!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" /> <meta name="Keywords" content="YES!B/S!,web标准,杨正祎,博客园,实例代码" /> <meta name="Description" content="这是一个简单YES!B/S!文章示例页面,来自杨正祎的博客,http://justinyoung.cnblogs.com/" /> <title>YES!B/S!文章示例页面</title> <style> body { margin: 0; padding: 0; } #header { width: 600px; height: 50px; background-color: red; margin:0 auto;/*居中显示*/ } #body{ width:600px; margin:0 auto;/*居中显示*/ } #sideBar{ width:150px; background-color:#0000ff; float:left; height:244px; } #main{ width:354px; float:left; background-color:green; height: } #footer{ width:600px; margin:0 auto; background-color:#666; } </style> </head> <body> <div id="header"> 这里是头部的内容。<br/ /> 可能有网站标题，就像<a target="_blank" href="" title=" title="">博客园</a>博客的标题、副标题。<br/ /> 也可能有导航栏在这里<br/ /> <strong>注意这句话在IE7中的显示1</strong><br/ /> <strong>注意这句话在IE7中的显示2</strong><br/ /> </div> <div id="body"> <div id="sideBar"> 这里是侧边栏，里面放一些辅助信息。就像<a target="_blank" href="" title=" title="">博客园</a>里面，每个人博客的侧边栏一样。<br/ /> 也可能有人留言，下面就是一个人的留言哦。<br/ /> “大家好，我是杨正祎，我发现一个很不错的网址哦。http://www.justinyoungcnblogs.com”。欢迎大家去看看哦。 </div> <div id="main"> 这里是主体的内容，随便你写啦。我就写上我的博客地址吧——<a target="_blank" href="http://justinyoung.cnblogs.com/" title="IE7的web标准之道">YES！B/S！</a> <p> 专注于B/S模式的项目。姓名：杨正祎(Justin Young)，程序员，专注于B/S模式的项目开发，擅长于Web标准页面设计。</p> <p>欢迎你们来为我的博客做客哦，里面有很多关于web标准方面的文章哦。请你们多多指教。</p> <p>最后还要非常华丽的署名——杨正祎</p> <p>日期当然也不能少啦——2008-2-21</p> </div> </div> <div id="footer"> 这里是footer，就放一些版权信息吧。©<a target="_blank" href="http://justinyoung.cnblogs.com/" title="IE7的web标准之道">YES！B/S！</a> </div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

图：这是在IE6中显示的效果截图，还算“整齐”

而当你展开下面这个折叠区域，去看这个页面在IE7下显示的效果图的时候，可能便会大吃一惊了。

图：这是在IE7中显示的效果截图，已经“不堪入目”了

我们惊讶的看到，网页“头部”变“矮”了，最后两句重要的句子“消失”了；侧边栏变“窄”了，那个重要的网址的后半部消失了（其实是被右面绿色的区域遮盖住了）；而最令人沮丧的是，右面“缺了个大口子”。原本整齐的布局，已经完全消失，出现的是一个“一塌糊涂”的页面。

出处：JustinYoung's Blog
责任编辑：bluehearts

上一页引起页面布局混乱的祸首 [1] 下一页引起页面布局混乱的祸首 [3]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。

相关文章

定义列表

作者文章

IE7的web标准之道 Ⅱ

IE7的web标准之道 Ⅰ


关键字搜索	常规搜索	推荐文档
热门搜索：CSS Fireworks 设计比赛网页制作 web标准用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG

站点最新

站点最新列表

周大福“敬•自然”设计大赛开启

国际体验设计大会7月将在京举行

中国国防科技信息中心标志征集

云计算如何让安全问题可控

云计算是多数企业唯一拥抱互联网的机会

阿里行云

云手机年终巨献，送礼标配299起

阿里巴巴CTO王坚的"云和互联网观"

1499元买真八核云OS双蛋大促

首届COCO桌面手机主题设计大赛

栏目最新

栏目最新列表

浅谈JavaScript编程语言的编码规范

如何在illustrator中绘制台历

Ps简单绘制一个可爱的铅笔图标

数据同步算法研究

用ps作简单的作品展示页面

CSS定位机制之一:普通流

25个最佳最闪亮的Eclipse开发项目

Illustrator中制作针线缝制文字效果

Photoshop制作印刷凹凸字体

VS2010中创建自定义SQL Rule