zoukankan      html  css  js  c++  java
  • 解决IE6,IE7不能隐藏绝对定位溢出的内容

    令人蛋疼的IE,IE6/IE7下父元素有相对/绝对定位时,子元素在IE6和IE7下overflow:hidden;失效。
    情况一:(在parent上增加position:relative)
    <style type="text/css">
    	.parent{ 100px; height:100px;border:1px solid #f00; overflow:hidden; position:relative;}
    	.sonF{ position:relative;}
    	.son{ 100px; height:100px; position:absolute; left:0;top:0;}
    	p{margin:0;padding:0;}
    </style>
    </head>
    
    <body>
    <div class="parent">
        <div class="sonF">
            <div class="son">
                <p>aaaaaaaaaaaaaa</p>
                <p>aaaaaaaaaaaaaa</p>
                <p>aaaaaaaaaaaaaa</p>
                <p>aaaaaaaaaaaaaa</p>
                <p>aaaaaaaaaaaaaa</p>
                <p>aaaaaaaaaaaaaa</p>
                <p>bbbb</p>
                <p>bbbbb</p>
            </div>
        </div>
    </div>
    情况二:(给son增加position:relative)
    <style type="text/css">
    	.parent{ 100px; height:100px; position:absolute; border:1px solid #f00;}
    	.son{ 100px; height:100px;left:0;top:0; overflow:hidden; position:relative;}
    	p{margin:0;padding:0;}
    </style>
    <div class="parent">
        <div class="son">
            <p>aaaaaaaaaaaaaa</p>
            <p>aaaaaaaaaaaaaa</p>
            <p>aaaaaaaaaaaaaa</p>
            <p>aaaaaaaaaaaaaa</p>
            <p>aaaaaaaaaaaaaa</p>
            <p>aaaaaaaaaaaaaa</p>
            <p>aaaaaaaaaaaaaa</p>
            <p>aaaaaaaaaaaaaa</p>
        </div>
    </div>
    如下图:
    
    如果.parent中的position设置为absolute也是如此。
    
    终上所述:
    哪个需要设置overflow;hidden,生效,就在哪个上面设置position:relative;
    


  • 相关阅读:
    day19.re正则表达式
    day18.os模块 对系统进行操作
    day17.json模块、时间模块、zipfile模块、tarfile模块
    day16.内置方法与模块
    day15.递归函数
    day14.推导式与生成器
    LeetCode-Permutations II
    LeetCode-Permutations
    LeetCode-Partition List
    LeetCode-Substring with Concatenation of All Words
  • 原文地址:https://www.cnblogs.com/pangblog/p/3258056.html
Copyright © 2011-2022 走看看