• 解决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;
    


  • 相关阅读:
    Java LinkList遍历方式
    Java LinkedList的实现原理
    ArrayList 原理(2)
    ArrayList 原理(1)
    Java中HashMap的实现原理
    Java HashMap两种遍历方式
    【转】Unity3d:读取FBX中的动画
    C#与U3D中字符串尾0
    U3D中的又一个坑
    MaxScript 学习笔记【有转载】
  • 原文地址:https://www.cnblogs.com/pangblog/p/3258056.html
Copyright © 2020-2023  润新知