<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>
分享到：
相关推荐
操作系统实验——内存管理之页面置换算法，包括FIFO，LRU，CLOCK三种算法
设计模式6大原则：里氏置换原则
操作系统，页面置换LRU。。。。。。。。。。。。。。。。。。
《操作系统》实验五：页面置换算法模拟.pdf
置换脱产研修项目——通识课——小学教师专业标准解读——夏鹏翔PPT课件.pptx
金融行业研究方法-投行案例学习（30）：出资置换问题解决之道.pdf
本资源使用Java实现了页面置换算法OPT、FIFO、LRU的模拟实现以及FIFO和LRU的命中率对比，内容包括Java源项目、jar包和bat文件。该资源的文字版信息请访问博客《操作系统实验：页面置换算法的模拟实现及命中率对比...
操作系统实验：页面置换算法实验.doc
水泥行业点评：水泥置换新规出台，控制无序置换有力一步.pdf
操作系统实验四：页面置换算法实验报告.pdf
钢铁：产能置换新规及中澳事件点评
是关于操作系统三种页面置换算法的代码，希望对你们有帮助！
建筑材料：产能置换办法修订稿微调，光伏、汽车玻璃不再列入产能置换.pdf
《操作系统》实验五：页面置换算法模拟.doc
通过模拟实现请求页式存储管理的几种基本页面置换算法，了解虚拟存储技术的特点，掌握虚拟存储请求页式存储管理中几种基本页面置换算法的基本思想和实现过程，并比较它们的效率。
建材行业：产能置换新规利好行业格局优化.pdf
《操作系统》实验五：页面置换算法模拟2.pdf
建材行业周报：产能置换新政加快推进，看好旺季需求.pdf