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就启作用了。
  • 相关阅读:
    Kattis
    HDU
    回溯法理解
    算法第5章上机实践报告
    贪心算法理解
    [模板] Dijkstra(堆优化)算法求最短路 Apare_xzc
    【文件管理系统】 Apaer_xzc
    [CCF] 201403-2 窗口 Apare_xzc
    [CCF] 201412-2 Z字形扫描 Apare_xzc
    [CCF] 201503-5 最小花费 Apare_xzc
  • 原文地址:https://www.cnblogs.com/jkko123/p/6294737.html
Copyright © 2011-2022 走看看