zoukankan      html  css  js  c++  java
  • IE6、7下overflow:hidden失效的问题

    问题产生原因:
    当父元素的直接子元素或者下级子元素的样式拥有position:relative或者position:absolute属性时,父元素的overflow:hidden属性就会失效。
    例如:
    <!DOCTYPE html>
    <html lang="zh">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {margin: 0; padding: 0;}
        .father { 200px; height: 200px; background: red; overflow: hidden;}
        .child { 300px; height: 300px; background: blue; position: absolute;}
    </style>
    </head>
    <body>
        <div class="father">
            <div class="child"></div>
        </div>
    </body>
    </html>
    在chrome下显示如下:
    由于我的系统是win7,没有装IE6、7,不过IE有一个开发者工具,按F12。
    这样我们刷新浏览器看看。
    父元素的over:hidden;并没有启作用。
     
    解决方案:
    给父元素加上position:relative或者position:absolute就可解决。
    IE6、7下,overflow:hidden所在容器必须固定高度,宽度。
    <!DOCTYPE html>
    <html lang="zh">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {margin: 0; padding: 0;}
        .father { 200px; height: 200px; background: red; overflow: hidden; position: relative;}
        .child { 300px; height: 300px; background: blue; position: absolute;}
    </style>
    </head>
    <body>
        <div class="father">
            <div class="child"></div>
        </div>
    </body>
    </html>
    
    这样父元素的overflow就启作用了。
  • 相关阅读:
    前端面试题
    Less 中的嵌套规则与 & 符号的使用
    组件的生命周期
    222
    221
    twemproxy代理memcache(3)
    memcache数据迁移与解决方案(2)
    mencache的原理与应用(1)
    yield推荐,理解协程的最佳入口
    上下文管理器的实现
  • 原文地址:https://www.cnblogs.com/jkko123/p/6294737.html
Copyright © 2011-2022 走看看