web标准：比较IE6与IE7放纵的孩子与严厉的父亲

【 tulaoshi.com - Web开发 】

KeyWord：ie6和ie7显示不同,web标准设计,ie6和ie7比较,ie6和ie7的变化,ie7对web设计人员的影响

IE7

刚出来，我就做了螃蟹，算是比较早接触IE7的。但是这个问题是从我刚试用IE7就一直困扰我。很久以来一直没有很好的找到原因，直到客户提出了这个bug，我们才不得不深入的研究了一下这个原因。

bug现象：

页面的布局在IE6和IE7中显示不同，如果在IE6里面显示正常了，在IE7显示就不正常，如果在IE7里面调正常了，在IE6里面有不对了。一句话——因为IE6和IE7的解析规则不同，导致相同的页面在IE6和IE7中显示不同。不能两全其美。贴个在IE6中正常在IE7中不正常的图片：

IE6中显示正常：

IE7中显示不正常：

大家都知道这个是因为IE6和IE7的解析方式不同造成的，但是到底是对什么的解析不同，为什么会出现这种现象我却是一直不得其解。（其实IE5和IE6的过渡时也有因为解析不同造成的页面渲染不同的现象，不过考虑到IE5已经推出历史舞台，我们就不讨论了）

分析过程：

从客户反馈过来这个bug的时候，我们已经有所准备了，因为以前我们已经测出这个bug，但是因为此系统的设计标准就是IE6环境，所以当时就没有深究，但考虑到IE7已经逐渐成为主流，且现在客户提出了此bug，我们自然就要认真对待了。此bug分配给我解决，当时我对此现象的知识只限于：如果对一些width和height的设置没有明确的设置单位，可能会因为IE6和IE7对默认单位的不同导致显示不同（所以我建议大家都在数值后面加上明确的单位，例如px），但是这个bug显然不是这个原因导致的，因为那种原因一般只导致较为细微的界面偏差。正在郁闷的时候，好在于何（我们公司的技术高人，公司我最敬佩的人物之一）拉了我一把。提出了里面一个div的宽度数值有明显的异常（后来看来这个的确是导致此bug的关键元素）。顺着这条路，终于找到了问题的根源。

问题根源：

我们来举一段简单的代码来说明这个问题：

!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
titleIE6/title
meta name="Author" content=""
meta name="Keywords" content=""
meta name="Description" content=""
/head
body
div id="divFather" style="width:200px;border:1px solid red"
div id="divChild" style="width:300px; border:1px dashed green; margin:5px;"
/div
/div
/body
/html

同样的代码在IE6和IE7下的显示如下：

IE6：

IE7：

IE6中divChild将divFather撑开了，所以IE6中divChild就像放纵的孩子，父容器任由着这个孩子放纵，“父亲”会无条件的被撑大来包裹“孩子”。

而IE7中divFather并不会迁就“孩子”，而是像严厉的父亲依然保持这个自己的“姿态”。孩子“放纵”的部分会根据父容器的设置不同以不同的方式显示（例如默认情况下就像上图超出显示，如果设置了强制隐藏就会被隐藏，如果设置了允许出现滚动条就会出现滚动条等）。

解决方法：

知道了bug的原因，解决起来便不难了，就是将子容器的宽度和父容器的宽度设置相衬即可，注意我用的词是“相衬”而不是“相同”，例如这个子容器

div id="divChild" style="width:300px; border:1px dashed green; margin:5px;"

/div

父容器应该设置为300px+2px+10px才能与之相衬，其实2px是左右两边的border，20是左右两边的margin，这种情况还比较简单，当然如果父容器还有padding的设置，子容器里面的布局再复杂一点就会比较令人痛疼了。有时候就要用微调找到临界值的方法了。

今天在网上看了高人的几篇文章，感觉我的这个文章简直就像小学生的作文，太过于稚嫩。惭愧惭愧，看来就算是看似简单的web设计也有太多的东西要学呀。推荐三篇文章《欲练 CSS ，必先宫 IE 》、《你有 table - 强迫症吗》和《根本不存在 DIV + CSS 布局这回事》。