通常设置position后,通过z-index属性来设置div的层叠情况。

但是在IE7中,设置position后,z-index会失效。导致div的层叠出现问题。

具体效果可以看这个页面

http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html

以下分别是IE7与IE8之间的差别:


请先认真看他们的HTML和CSS信息:

This box should be on top
This box should not be on top; IE however seems to create a new stacking context for positioned elements, even when the computed z-index of that element is 'auto'.
body { margin: 0; padding: 0; }
#container { position: relative; }
#box1 { position: absolute; top: 100px; left: 510px; width: 200px; height: 200px; background-color: yellow; z-index: 20; }
#box2 { position: absolute; top: 50px; left: 460px; width: 200px; height: 200px; background-color: lime; z-index: 10; }
#content { width: 420px; padding: 20px; }

正常理解是应该显示上图右边的那种情况,但是IE7上的确是一件很怪异的事情,查了许多资料终于找到了解决方案:
http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn’t work correctly. So we giving the parent element a higher z-index actual fixes the bug

以上告诉我们,IE设置了position的元素会生成一个新的stacking context,导致 z-index 为0,所以才失效了。所以我们需要在这个元素的父元素上设置一个更高的z-index值。

在上述的box1中的父元素container设置一个更大的z-index就能解决这个问题,如下:

#container { position: relative; z-index:30;}

这一Bug差点搞残我。。。

在敏捷回顾会议中引导使用ORID

头一次接触ORID方法在2015年的一次敏捷回顾上,但是还不知道它,当天围坐在小会议室中通过该方法总结迭代开发经验,使我很有收获。ORID工作法很好理解,几乎一听就会,只是日常工作中我们总会选择更偷懒的方法,而忽略了总结过程中思考和逻辑的重要性。根据百度百科,ORID是一种...… Continue reading

生产环境Linux部署

Published on July 12, 2017

SVN 迁移到 GitLab

Published on June 17, 2017