zoukankan      html  css  js  c++  java
  • 【转】隐藏元素的子元素隐藏无效

    将某元素隐藏后,对其原本显示的子元素进行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!

    原文链接:http://himeters.com/ie-displaynone-bug

  • 相关阅读:
    GL_TRIANGLE_FAN Vs GL_TRIANGLE_STRIP
    Color bleeding与caustics概念解析
    Two path ray tracing与Photon Mapping(粒子跟踪)
    右手定则判断法线方向
    正确使用atoi
    深入探讨透视投影坐标变换
    gluBuild2DMipmaps与glTexImage2D与glGenTexture()函数
    OpenGL纹理贴图流程
    int main( int argc, char ** argv)在VS2008中的配置的一个实例
    c++标准库中vector数组遍历时的用法
  • 原文地址:https://www.cnblogs.com/kuler/p/3300670.html
Copyright © 2011-2022 走看看