【转】隐藏元素的子元素隐藏无效

原文

将某元素隐藏后,对其原本显示的子元素进行display:none操作,当再把这个元素显示出来的时候,在ie678的兼容模式下会发现子元素的隐藏无效.
感谢ooxx君给找的这个DEMO页,要重现bug请使用欢乐的IE系列浏览器打开.
博主用了一个很有爱的兔子向大家展示这个神奇的魔术:

1,把容器和兔子的position都设为relative或者absolute

2,把容器的display设为none;

3,把兔子的display设为none;

4,再把容器的display设为block

(你看,IE总是会给你惊喜的对不)

在IE678的兼容模式下你仍然会看到这只兔子,尽管是你亲手给他设置的display:none,当然你也许会觉得这是什么障眼术,然后你肯定会坚持打开调试器然后手动给这个兔子重新写上display:none,但是它依旧坚挺!啊哈,这就是魔术对不.

这个bug出现的条件是:

1, IE678的兼容模式下,IE8的默认模式, Firefox3, Opera9, Safari3 on Windows, Safari 3 on Mac, Chrome都不会重现.

2,容器和子元素(上面的那只兔子代表的元素)的定位都必须不是satatic的,只能是relative,或者absolute.

3,顺序必须是先把容器隐藏,再把子元素隐藏,如果顺序不对,这个魔术就会搞砸.

4,这个bug只会发生在隐藏后的元素中,并且这是在页面完全载入后.

解决的办法

1,临时性地把子元素的 display 由 none 设为 block 然后再设回 none

2,临时性地把子元素的 position 由 relative 设为 absolute 然后再设回 relative (反之一样.)

3,临时性地子元素的 visibility 设为 hidden 然后再设回去(但是这个只发生在子元素的position为absolute的时候)

今天跟OOXX君讨论的结果是可以在将容器隐藏前就先对其子元素隐藏,这种方法或许实现起来看上去更正常一些.

The Wonderful World Of IE!