<div style="border-right: teal 1px dotted; border-top: teal 1px dotted; font-size: 9pt; float: right; border-left: teal 1px dotted; width: 115px; color: teal; border-bottom: teal 1px dotted; text-align: center;">
<img alt="" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/ie7road.png"><br>
IE7的web标准之道</div>
<p>IE历来被web标准的拥护者所诟病，而当FireFox横空出世以后，更多的网页制作者开始关注web标准设计。看着FireFox的市场占有率不停的上升，微软终于推出了IE7。但IE7是否真的能够力挽狂澜，是否真的能够得到用户的信任，是否真的能够得到网页设计者的认可呢？</p>
<p>且看《IE7的web标准之道》系列文章，和你一起见证IE7的改变！</p>
<h4>互联网上没有邮局！</h4>
<p>看看下面这幅图，感觉是不是很亲切呢？有种“信纸”的感觉吧。其实这种感觉真的很不错哦，很怀旧、很小资的味道（突然想起以前我写的那些情书了^_^）。但是，你游遍互联网，便会发现，很少有模拟信纸布局的网页。这到底是为什么呢？难道是大家都没有想到吗？难道是大家真的已经把“信”这种东西忘记了？还是因为互联网上没有邮局来寄出这些信件呢？</p>
<div class="floatMPic">
<a title="replaced element bug" href="http://justinyoung.cnblogs.com/" target="_blank"><img alt="replaced element bug" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/ie7road61.gif"></a><br><br>
模拟信纸的网页</div>
<p>其实都不是，不是没有人想到，也不是没有人愿意用，而是被一种“虫”咬怕了。而这只“虫”就是我们今天要讲的——“置换元素与行距bug”。</p>
<h4>臭虫显身！</h4>
<p>这里有两个测试用的示例页面。第一个是文章主体没有包含置换元素（replaced element）， bug不会作怪的例子。而第二个是文章主体中包含了置换元素（示例中为<img>）时，bug在IE6浏览器下会作怪的例子。</p>
<p>在举例之前，先让我们了解一下，什么是置换元素（replaced element）——</p>
<blockquote>“An element for which the CSS formatter knows only the intrinsic dimensions. In HTML, IMG, INPUT, TEXTAREA, SELECT, and OBJECT elements can be examples of replaced elements. For example, the content of the IMG element is often replaced by the image that the "src" attribute designates. CSS does not define how the intrinsic dimensions are found.”<br><div style="text-align: right;">资料来源于<a title="什么是置换元素（replaced element）" href="http://www.w3.org/TR/REC-CSS2/conform.html#replaced-element%20Detailed%20Description" target="_blank">W3C网站对replaced element的定义</a>
</div>
</blockquote>
<p>一来自己的英语水平太烂，二来这段英语比较简单，所以俺这里就不翻译了，大致意思大家应该都看得懂。</p>
<h5>测试用示例页面1源码</h5>
<textarea id="txtTestCode2" rows="12" cols="65"><!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 type="text/css">
#lineheight_bug {
line-height: 39px;
font-size:14px;
background:url('http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/rule.gif') no-repeat;
padding:0;
padding-left:20px;
height:435px;
width:530px;
border:1px solid red;
}
</style>
</head>
<body>
<div id="lineheight_bug">
<p>这是一个用来演示line-height bug的实例。它来自《IE7的web标准之道——6：(修正)置换元素与行距bug》一文。而这篇文章是属于《IE7的web标准之道》系列文章的。《IE7的web标准之道》系列文章是个文章系列，主要讲解了IE7相对于IE6各个方面的修正和改进。对于网页设计者从将网页设计从IE6平稳的过渡到IE7平台有一定的指导意义。现在《IE7的web标准之道》系列文章已经出道第六篇了。前面五篇的标题分别是：《IE7的web标准之道——1：前言(兼目录)》 ,《IE7的web标准之道——2：(改进)更丰富的CSS选择符》 ,《IE7的web标准之道——3：(修正)引起页面布局混乱的祸首 》 , 《IE7的web标准之道——4：(修正)歌剧院魅影bug 》 以及《IE7的web标准之道——5：(修正)上去了！终于上去了！ 》。如果你有兴趣，可以访问http://justinyoung.cnblogs.com/。谢谢。</p>
</div>
</body>
</html>
</textarea><div style="clear: both; margin-bottom: 15px;">
<input type="button" value="运行代码"><input type="button" value="复制代码"><input type="button" value="另存代码"><span style="font-size: 9pt; color: #999;">提示：可以先在文本框内，根据需要修改代码后再运行</span>
</div>
<p>让我们来看看示例页面1在IE6和IE7下的显示结果，可以看出其实没有什么区别的。（IE6和IE7的共存方法可以参看<a title="IE6、IE7、IE8共存方法" href="http://www.cnblogs.com/JustinYoung/archive/2008/03/14/IE6_IE7_IE8.html" target="_blank">《IE6、IE7、IE8共存方法 》</a>一文）——</p>
<div class="floatMPic">
<a title="replaced element bug" href="http://justinyoung.cnblogs.com/" target="_blank"><img alt="replaced element bug" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/ie7road62.gif"></a><br>
示例页面在IE6和IE7下的显示效果图</div>
<div class="hiddenArea">
<div class="haContracted" id="divHaF_1">
<img class="imgContracted" alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif"><span class="showText">点击此处查看示例页面1在FireFox、IE8、Opera、Safari下的显示效果图</span>
</div>
<div class="haExpanded" id="divHaS_1">
<div class="haHiddenAreaOpration"><img class="imgExpanded" alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif"></div>
<div class="haMain">
<div class="floatMPic">
<img alt="replaced element bug" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/ie7road63.gif"><br>
在FireFox、IE8、Opera、Safari下的显示效果图</div>
</div>
<!--end: haMain -->
</div>
</div>
<!--end: hiddenArea -->
<h5>测试用示例页面2源码</h5>
<textarea id="txtTestCode3" rows="12" cols="65"><!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 type="text/css">
#lineheight_bug {
line-height: 39px;
font-size:14px;
background:url('http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/rule.gif') no-repeat;
padding:0;
padding-left:20px;
height:435px;
width:530px;
border:1px solid red;
}
</style>
</head>
<body>
<div id="lineheight_bug">
<p>这是一个用来演示line-height bug的实例。它来自《IE7的web标准之道——6：(修正)置换元素与行距bug》一文。而这篇文章是属于《IE7的web标准之道》系列文章的。《IE7的web标准之道》系列文章是个文章系列，主要讲解了IE7相对于IE6各个方面的修正和改进。 <img src="http://images.cnblogs.com/cnblogs_com/justinyoung/common/wedgits_red.gif" alt="这就是置换元素的一种" /> 对于网页设计者从将网页设计从IE6平稳的过渡到IE7平台有一定的指导意义。现在《IE7的web标准之道》系列文章已经出道第六篇了。前面五篇的标题分别是：《IE7的web标准之道——1：前言(兼目录)》 ,《IE7的web标准之道——2：(改进)更丰富的CSS选择符》 ,《IE7的web标准之道——3：(修正)引起页面布局混乱的祸首 》 , 《IE7的web标准之道——4：(修正)歌剧院魅影bug 》 以及《IE7的web标准之道——5：(修正)上去了！终于上去了！ 》。如果你有兴趣，可以访问http://justinyoung.cnblogs.com/。谢谢。</p>
</div>
</body>
</html>
</textarea><div style="clear: both; margin-bottom: 15px;">
<input type="button" value="运行代码"><input type="button" value="复制代码"><input type="button" value="另存代码"><span style="font-size: 9pt; color: #999;">提示：可以先在文本框内，根据需要修改代码后再运行</span>
</div>
<p>在这个测试页面中，我们在文章主体部分放入了一个小的图片（一个红色的方形，在第四行文字中间）。而通过上面对置换元素（replaced element）的定义，我们知道<img>是一种置换元素。这样，就满足了bug出现的条件。于是，在IE6中，我们便能够看到这个bug了（第四行文字的上下文间距出现了问题，从而导致整个布局发生混乱）。截图如下——</p>
<div class="floatMPic">
<a title="replaced element bug" href="http://justinyoung.cnblogs.com/" target="_blank"><img alt="replaced element bug" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/ie7road64.gif"></a><br>
bug在IE6中的展现效果图（IE7已经修正了此bug）</div>
<h4>没有正解的“WHY？”</h4>
<p>首先让我们提两个概念：line-height和font-size，行高和字体大小。line-height减去font-size称之为“间距（leading）”。间距的一半，称之为“半间距”。而这个“半间距”会被加在每行文字的上面和下面，于是行与行之间的空隙（有上一段下面的半间距 和 下一段上面的半间距相加而成）就出来了。下面的这幅图片可能对你理解有所帮助。</p>
<div class="floatMPic">
<a title="replaced element bug" href="http://justinyoung.cnblogs.com/" target="_blank"><img alt="replaced element bug" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/ie7road65.gif"></a><br>
行距的细节分析图</div>
<p>之所以出现了这种bug，是因为IE6错误的将带有置换元素的那行文字的上下半间距，和相邻的上下两行的下上半间距合并到了一起。于是，带有置换元素的那行文字的上下行距就被减少了一半，所以页面出现了混乱。</p>
<p>注：虽然上面的文字很好的解释了bug产生的原因，但是，仅仅是一种参考，并非官方解释。</p>
<h4>残缺不完美的“HOW？”</h4>
<p>也许产生的原因并不重要，但是如何修复却是一定是重要的。毕竟现在IE6的市场份额还是不能忽视的。</p>
<p>非常遗憾，虽然有解决方案，但是并非完美。方法就是对那些置换元素设置margin-top和margin-bottom。以便把被“压缩”的行间距“撑开”。下面这个示例代码，供你参考。如果，你有更好的解决方案，请赐教，谢谢。（可以通过<a title="博客园web标准设计小组" href="http://space.cnblogs.com/group/w3c/" target="_blank">【博客园web标准设计小组】</a>提交解决方案）</p>
<textarea id="txtTestCode4" rows="12" cols="65"><!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 type="text/css">
#lineheight_bug {
line-height: 39px;
font-size:14px;
background:url('http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/rule.gif') no-repeat;
padding:0;
padding-left:20px;
height:435px;
width:530px;
border:1px solid red;
}
/* 利用IE6的css hack针对IE6修正bug，关于css hack的知识你可以访问：http://www.cnblogs.com/JustinYoung/archive/2007/09/14/css-hack.html*/
#lineheight_bug img{
_margin:17px 0;
_vertical-align: middle;
}
</style>
</head>
<body>
<div id="lineheight_bug">
<p>这是一个用来演示line-height bug的实例。它来自《IE7的web标准之道——6：(修正)置换元素与行距bug》一文。而这篇文章是属于《IE7的web标准之道》系列文章的。《IE7的web标准之道》系列文章是个文章系列，主要讲解了IE7相对于IE6各个方面的修正和改进。 <img src="http://images.cnblogs.com/cnblogs_com/justinyoung/common/wedgits_red.gif" alt="这就是置换元素的一种" /> 对于网页设计者从将网页设计从IE6平稳的过渡到IE7平台有一定的指导意义。现在《IE7的web标准之道》系列文章已经出道第六篇了。前面五篇的标题分别是：《IE7的web标准之道——1：前言(兼目录)》 ,《IE7的web标准之道——2：(改进)更丰富的CSS选择符》 ,《IE7的web标准之道——3：(修正)引起页面布局混乱的祸首 》 , 《IE7的web标准之道——4：(修正)歌剧院魅影bug 》 以及《IE7的web标准之道——5：(修正)上去了！终于上去了！ 》。如果你有兴趣，可以访问http://justinyoung.cnblogs.com/。谢谢。</p>
</div>
</body>
</html>
</textarea><div style="clear: both; margin-bottom: 15px;">
<input type="button" value="运行代码"><input type="button" value="复制代码"><input type="button" value="另存代码"><span style="font-size: 9pt; color: #999;">提示：可以先在文本框内，根据需要修改代码后再运行</span>
</div>
<p>下面是修复后的效果截图——</p>
<div class="floatMPic">
<a title="replaced element bug" href="http://justinyoung.cnblogs.com/" target="_blank"><img alt="replaced element bug" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/ie7road66.gif"></a><br>
修正后的页面效果截图</div>
<p>修复中用到了针对IE6的css hack。关于css hack的知识，你可以阅读<a title="实例讲解符合中国特色的和网络现状的实用CSS Hack(附源码) " href="http://www.cnblogs.com/JustinYoung/archive/2007/09/14/css-hack.html" target="_blank">《实例讲解符合中国特色的和网络现状的实用CSS Hack(附源码) 》</a>一文。</p>
<h4>相关文章资源列表</h4>
<ul style="">
<li>
<a title="《IE7的web标准之道——1：前言》 " href="http://www.cnblogs.com/JustinYoung/archive/2008/02/18/IE7_wsRoad_foreword.html" target="_blank">《IE7的web标准之道——1：前言（兼目录）》 </a>
</li>
<li>
<a title="IE7的web标准之道——2：（改进）更丰富的CSS选择符" href="http://www.cnblogs.com/JustinYoung/archive/2008/02/20/IE7_wsRoad_selector.html" target="_blank">《IE7的web标准之道——2：（改进）更丰富的CSS选择符》</a>
</li>
<li>
<a title="IE7的web标准之道——3：（修正）引起页面布局混乱的祸首" href="http://www.cnblogs.com/JustinYoung/archive/2008/02/25/IE7_wsRoad_overflow.html" target="_blank">《IE7的web标准之道——3：（修正）引起页面布局混乱的祸首 》</a>
</li>
<li>
<a title="IE7的web标准之道——4：（修正）歌剧院魅影bug" href="http://www.cnblogs.com/JustinYoung/archive/2008/03/03/IE7_wsRoad_dup_characters.html" target="_blank">《IE7的web标准之道——4：（修正）歌剧院魅影bug 》</a>
</li>
<li>
<a title="IE7的web标准之道——5：（修正）上去了！终于上去了！" href="http://www.cnblogs.com/JustinYoung/archive/2008/03/12/IE7_wsRoad_div_select.html" target="_blank">《IE7的web标准之道——5：（修正）上去了！终于上去了！》</a>
</li>
<li>
<a title="IE6、IE7、IE8共存方法" href="http://www.cnblogs.com/JustinYoung/archive/2008/03/14/IE6_IE7_IE8.html" target="_blank">《IE6、IE7、IE8共存方法》</a>
</li>
<li>
<a title="实例讲解符合中国特色的和网络现状的实用CSS Hack(附源码) " href="http://www.cnblogs.com/JustinYoung/archive/2007/09/14/css-hack.html" target="_blank">《实例讲解符合中国特色的和网络现状的实用CSS Hack(附源码) 》</a>
</li>
<li>
<a title="博客园web标准设计小组" href="http://space.cnblogs.com/group/w3c/" target="_blank">【博客园web标准设计小组】</a> </li>
</ul>
分享到：
相关推荐
设计模式6大原则：里氏置换原则
操作系统，页面置换LRU。。。。。。。。。。。。。。。。。。
在这个实验中，我们将探讨内存管理中的一个重要概念——页面置换算法。页面置换算法是解决虚拟内存中缺页问题的关键技术，当物理内存不足时，它会选择将部分内存中的页面移出到磁盘的对换区，为新进来的页面腾出空间...
6. **输出密文**： - 最终，根据置换后的数组`c`输出加密后的密文。 #### 解密过程详解 1. **输入密钥和密文**： - 首先，同样需要用户输入之前使用的密钥`K`以及加密后的密文`a`。 2. **构建密文矩阵**： - ...
根据给定文件的内容，可以提取以下与操作系统中的页面置换算法模拟相关的知识点： 1. 页面置换算法的概念： 页面置换算法是操作系统中管理内存的一种技术，用于当物理内存不足以存放所有进程页面时，决定哪个内存...
通过对请求页式存储管理中页面置换算法的模拟设计，掌握请求页式存储管理页面置换算法，并进一步理解虚拟存储技术的原理及特点。 设计内容：设计一个虚拟存储及内存工作区，使用先进先出算法（FIFO），理想型淘汰...
在虚拟内存系统中，页面置换算法是核心组件之一，它决定了当内存满时，如何选择要替换出去的页面以腾出空间加载新的页面。本文将深入探讨几种常见的页面置换算法及其特点。 1. **最优页面置换算法（Optimal Page ...
金融行业研究方法-投行案例学习（30）：出资置换问题解决之道.pdf
本资源使用Java实现了页面置换算法OPT、FIFO、LRU的模拟实现以及FIFO和LRU的命中率对比，内容包括Java源项目、jar包和bat文件。该资源的文字版信息请访问博客《操作系统实验：页面置换算法的模拟实现及命中率对比...
水泥行业点评：水泥置换新规出台，控制无序置换有力一步.pdf
操作系统实验四：页面置换算法实验报告 页面置换算法是操作系统中的一种关键机制，它可以有效地提高系统的性能和效率。在本实验报告中，我们将对页面置换算法进行实验和研究，并对其性能进行比较。 pages ...
钢铁：产能置换新规及中澳事件点评
是关于操作系统三种页面置换算法的代码，希望对你们有帮助！
通过模拟实现请求页式存储管理的几种基本页面置换算法，了解虚拟存储技术的特点，掌握虚拟存储请求页式存储管理中几种基本页面置换算法的基本思想和实现过程，并比较它们的效率。
建材行业：产能置换新规利好行业格局优化.pdf
例如，8元置换(1 5 2 3 6) (7 8)可以分解为(1 5) (1 2) (1 3) (1 6) (7 8)。 对换分解是将轮换进一步分解为基本的2阶对换（即对换）的乘积。每个k阶轮换可以表示为(k-1)个对换的乘积，例如8元置换(1 5 2 3 6) (7 8)...
标准的框架结构包括三个维度：专业理念与师德、专业知识、专业能力，并进一步细分为13个领域和60条具体要求，覆盖了从专业理解、学生态度到教育教学实践、个人修养和持续发展等多个层面。 总的来说，《小学教师专业...
建材行业周报：产能置换新政加快推进，看好旺季需求.pdf
操作系统中的Cache与内存间的置换算法有LRU，FIFO等经典算法，作者首先程序实现了此2种算法，并在此2者的基础上创新出一个新的置换算法LRU_FIFO算法，获得高校教师很高评价，该算法结合LRU与FIFO的特点，也可单独...