IE7的web标准之道——6：（修正）置换元素与行距bug

IE7的web标准之道

IE历来被web标准的拥护者所诟病，而当FireFox横空出世以后，更多的网页制作者开始关注web标准设计。看着FireFox的市场占有率不停的上升，微软终于推出了IE7。但IE7是否真的能够力挽狂澜，是否真的能够得到用户的信任，是否真的能够得到网页设计者的认可呢？

且看《IE7的web标准之道》系列文章，和你一起见证IE7的改变！

互联网上没有邮局！

看看下面这幅图，感觉是不是很亲切呢？有种“信纸”的感觉吧。其实这种感觉真的很不错哦，很怀旧、很小资的味道（突然想起以前我写的那些情书了^_^）。但是，你游遍互联网，便会发现，很少有模拟信纸布局的网页。这到底是为什么呢？难道是大家都没有想到吗？难道是大家真的已经把“信”这种东西忘记了？还是因为互联网上没有邮局来寄出这些信件呢？

模拟信纸的网页

其实都不是，不是没有人想到，也不是没有人愿意用，而是被一种“虫”咬怕了。而这只“虫”就是我们今天要讲的——“置换元素与行距bug”。

臭虫显身！

这里有两个测试用的示例页面。第一个是文章主体没有包含置换元素（replaced element）， bug不会作怪的例子。而第二个是文章主体中包含了置换元素（示例中为<img>）时，bug在IE6浏览器下会作怪的例子。

在举例之前，先让我们了解一下，什么是置换元素（replaced element）——

“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.”

资料来源于W3C网站对replaced element的定义

一来自己的英语水平太烂，二来这段英语比较简单，所以俺这里就不翻译了，大致意思大家应该都看得懂。

测试用示例页面1源码

<!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://www.cnblogs.com/images/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>

提示：可以先在文本框内，根据需要修改代码后再运行

让我们来看看示例页面1在IE6和IE7下的显示结果，可以看出其实没有什么区别的。（IE6和IE7的共存方法可以参看《IE6、IE7、IE8共存方法》一文）——

示例页面在IE6和IE7下的显示效果图

点击此处查看示例页面1在FireFox、IE8、Opera、Safari下的显示效果图

在FireFox、IE8、Opera、Safari下的显示效果图

测试用示例页面2源码

<!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://www.cnblogs.com/images/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://www.cnblogs.com/images/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>

提示：可以先在文本框内，根据需要修改代码后再运行

在这个测试页面中，我们在文章主体部分放入了一个小的图片（一个红色的方形，在第四行文字中间）。而通过上面对置换元素（replaced element）的定义，我们知道<img>是一种置换元素。这样，就满足了bug出现的条件。于是，在IE6中，我们便能够看到这个bug了（第四行文字的上下文间距出现了问题，从而导致整个布局发生混乱）。截图如下——

bug在IE6中的展现效果图（IE7已经修正了此bug）

没有正解的“WHY？”

首先让我们提两个概念：line-height和font-size，行高和字体大小。line-height减去font-size称之为“间距（leading）”。间距的一半，称之为“半间距”。而这个“半间距”会被加在每行文字的上面和下面，于是行与行之间的空隙（有上一段下面的半间距和下一段上面的半间距相加而成）就出来了。下面的这幅图片可能对你理解有所帮助。

行距的细节分析图

之所以出现了这种bug，是因为IE6错误的将带有置换元素的那行文字的上下半间距，和相邻的上下两行的下上半间距合并到了一起。于是，带有置换元素的那行文字的上下行距就被减少了一半，所以页面出现了混乱。

注：虽然上面的文字很好的解释了bug产生的原因，但是，仅仅是一种参考，并非官方解释。

残缺不完美的“HOW？”

也许产生的原因并不重要，但是如何修复却是一定是重要的。毕竟现在IE6的市场份额还是不能忽视的。

非常遗憾，虽然有解决方案，但是并非完美。方法就是对那些置换元素设置margin-top和margin-bottom。以便把被“压缩”的行间距“撑开”。下面这个示例代码，供你参考。如果，你有更好的解决方案，请赐教，谢谢。（可以通过【博客园web标准设计小组】提交解决方案）

<!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://www.cnblogs.com/images/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://www.cnblogs.com/images/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>

提示：可以先在文本框内，根据需要修改代码后再运行

下面是修复后的效果截图——

修正后的页面效果截图

修复中用到了针对IE6的css hack。关于css hack的知识，你可以阅读《实例讲解符合中国特色的和网络现状的实用CSS Hack(附源码) 》一文。

IE7的web标准之道——6：（修正）置换元素与行距bug

互联网上没有邮局！

臭虫显身！

测试用示例页面1源码

测试用示例页面2源码

没有正解的“WHY？”

残缺不完美的“HOW？”

相关文章资源列表