位置：首页>> 网络编程>> 网页设计>> IE7的web标准之道 Ⅲ（2）

IE7的web标准之道 Ⅲ（2）

作者：阿一　来源：JustinYoung's Blog　发布时间：2008-08-20 12:55:00　

标签：overflow,标准,ie7,设计

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

运行代码框

<!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>

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

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

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

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

第一页上一页 1

3 4 5 下一页

投稿

IE7的web标准之道 Ⅲ（2）

猜你喜欢