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;
    


  • 相关阅读:
    18.10.29 考试总结
    【BZOJ】2730: [HNOI2012]矿场搭建
    BZOJ [ZJOI2007]仓库建设
    18.10.24 考试总结
    ZOJ 3740 Water Level
    洛谷 P2474 [SCOI2008]天平
    洛谷 P4180 【模板】严格次小生成树[BJWC2010]
    CF961E Tufurama
    18.10.22 考试总结
    18.10.19 考试总结
  • 原文地址:https://www.cnblogs.com/pangblog/p/3258056.html
Copyright © 2011-2022 走看看