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;
    


  • 相关阅读:
    python 文件路径拼接、判断、创建、输出
    热力图制作
    矩阵文件添加列标签
    cmd运行 ‘.py’ 文件
    hdu 2017 字符串统计
    hdu 2016 数据的交换输出
    hdu 2014 青年歌手大奖赛_评委会打分
    hdu 2013 蟠桃记
    hdu 2012 素数判定
    hdu 2011 多项式求和
  • 原文地址:https://www.cnblogs.com/pangblog/p/3258056.html
Copyright © 2011-2022 走看看