项目中经常会用到层的绝对定位,但在IE6,IE7中它的表现却与其他浏览器存在差异,姑且算是一个IE的BUG吧(IE8除外).
先来看看这个BUG的触发条件:
先建立一个简单的模型,一个有固定宽度水平居中的容器wrapper,一个绝对定位的层position-box;这里讨论的是position-box并未设置left,right,top,bottom等属性的情况下的效果,这时候position-box对象会遵从正常的HTML布局规则,在前一个对象之后立即被呈递.
提示：你可以先修改部分代码再运行。
运行代码后可以看到效果:
IE6 & 7 (下文都以IE7为例)
FF,IE8,opera… (下文都以FF为例)
很明显的看出在IE6,7中position-box的定位是以wrapper容器的左顶点为起始点,而在FF中起始点是浏览器窗体的左顶点(或者说是以body顶点为起始点).
改变一下布局,让wrapper先于position-box载入,这时IE7中的效果就与FF中一致了(这也是与CSS文档中所描述的规则相符的,上面红字部分).
然后我们把position-box放入wrapper中再增加一个向左浮动的层sidebar,让sidebar后于position-box载入,并调整sidebar的浮动方向(float:left;float:right…)看看效果:
提示：你可以先修改部分代码再运行。
结果FF下,position-box并没改变,但IE7下却受到sidebar浮动方向的影响,也就是说IE6,7的position属性会受到相邻容器布局的同时影响,而非FF等浏览器中只受前一个容器布局的影响,我想这就是IE6,7中呈现出的效果与FF等浏览器中不一致的原因.
那么如何消除这个BUG呢,因为IE6,7会受到上下相邻容器的同时影响,所以先得把情况简单化,就是让position-box最早载入,这样就只会被后面的容器所影响(而在FF中是不会受影响的)再就是就是增加一个宽度100%的容器,这样不管后面的容易怎样布局,position-box都只会被100%宽度所影响,从而将起始点定在该容器的左顶点,最终的效果就与FF等一致了.
提示：你可以先修改部分代码再运行。
