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下的显示如下:
(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)IE6:
IE7:
IE6中divChild将divFather撑开了,所以IE6中divChild就像放纵的孩子,父容器任由着这个孩子放纵,“父亲”会无条件的被撑大来包裹“孩子”。
而IE7中divFather并不会迁就“孩子”,而是像严厉的父亲依然保持这个自己的“姿态”。孩子“放纵”的部分会根据父容器的设置不同以不同的方式显示(例如默认情况下就像上图超出显示,如果设置了强制隐藏就会被隐藏,如果设置了允许出现滚动条就会出现滚动条等)。
解决方法:
知道了bug的原因,解决起来便不难了,就是将子容器的宽度和父容器的宽度设置相衬即可,注意我用的词是“相衬”而不是“相同”,例如这个子容器
(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)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 布局这回事》。