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://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>

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

让我们来看看示例页面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://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>

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

在这个测试页面中，我们在文章主体部分放入了一个小的图片（一个红色的方形，在第四行文字中间）。而通过上面对置换元素（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://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>

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

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

修正后的页面效果截图

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

posted @ 2008-03-20 00:12 阿一(杨正祎) 阅读(4789) 评论(24) 编辑收藏

发表评论

　回复　引用　

#1楼 2008-03-20 05:13 | sg[未注册用户]

thx....

　回复　引用　查看　

#2楼 2008-03-20 06:18 | jillzhang

你这也太酷了亚，而且博文写的很有个性

　回复　引用　查看　

#3楼 2008-03-20 08:40 | 程序人生-123

好文章要支持鼓励

　回复　引用　

#4楼 2008-03-20 09:05 | imxjb[未注册用户]

楼主对web标准的研究深度可见一斑

　回复　引用　查看　

#5楼 2008-03-20 09:12 | 生鱼片

博主的文章看的真明白

　回复　引用　

#6楼 2008-03-20 09:15 | Lunatic Sun[未注册用户]

发现bug是一件好事，不过在文中使用inline的img元素在实际情况中并不多见。通常都会放在一个block元素中。给img设置line-height能够解决bug吗？我没有测试过。不过使用margin的话似乎丑陋了一点。

　回复　引用　查看　

#7楼 2008-03-20 09:25 | Cat Chen

为什么是设置margin而不是padding呢？padding更容易模仿line-height的效果吧。

　回复　引用　查看　

#8楼 2008-03-20 20:15 | airwolf2026

呵呵,慢慢学习

　回复　引用　查看　

#9楼 2008-03-20 20:49 | 没剑

好，不错，楼主的文章质量都很好

　回复　引用　查看　

#10楼 2008-03-20 22:42 | 侯垒

好文章.关于这方面的文章关注中.

　回复　引用　查看　

#11楼 2008-03-20 22:46 | raozou

从次专辑上市以来一直关注中希望老杨继续以后能继续带给我们更好的文章强烈支持中另本人为博客园--web标准小组提供了一个QQ群群号：33715043
不知道老杨是否有兴趣加入把一群页面仔集合起来有个交流的地方

　回复　引用　

#12楼 2008-03-21 09:33 | look look[未注册用户]

一定得强烈支持！

　回复　引用　查看　

#13楼 [楼主]2008-03-21 10:05 | 杨正祎

--引用--------------------------------------------------
raozou: 从次专辑上市以来一直关注中希望老杨继续以后能继续带给我们更好的文章强烈支持中另本人为博客园--web标准小组提供了一个QQ群群号：33715043
不知道老杨是否有兴趣加入把一群页面仔集合起来有个交流的地方
--------------------------------------------------------
谢谢raozou，非常感谢你建立了这个群。我会加入的。
但是，我希望大家能够加入【博客园web标准设计小组】，这样大家博客园的朋友就能更进一步的交流了，关键是能够将讨论的过程记录下来。 QQ群的弊端就是，不是所有的朋友都喜欢上QQ，而且对于QQ群的成员不是能够很好的进行审核，最不好的莫过于不能将讨论的过程记录下来，这样对于后来的朋友会说一笔损失。
希望你能理解。谢谢。

　回复　引用　查看　

#14楼 [楼主]2008-03-21 10:49 | 杨正祎

@sg
@程序人生-123
@airwolf2026
@look look
@侯垒
谢谢大家都支持，希望以后能继续得到各位的指教，谢谢。

　回复　引用　查看　

#15楼 [楼主]2008-03-21 10:50 | 杨正祎

@jillzhang
我觉得你那个gif也很酷呀。

　回复　引用　查看　

#16楼 [楼主]2008-03-21 10:51 | 杨正祎

@imxjb
见笑了。其实对于web标准这块我也只是个初学者。

　回复　引用　查看　

#17楼 [楼主]2008-03-21 10:52 | 杨正祎

@Lunatic Sun
对置换元素设置line-height不能解决问题。你可以试一下。我也是感觉用margin有点丑陋，但是还没有找到更好的办法。如果，你有更好的办法请不吝赐教，谢谢。