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;
    


  • 相关阅读:
    「CH2401」送礼物 解题报告
    IO流总结
    关于Servlet中GET和POST方法的总结
    关于Java-枚举的总结
    JVM原理
    Form表单中method="post/get'的区别
    基于Servlet+JSP+JavaBean开发模式的用户登录注册
    浅谈jsp和servlet的区别
    serialVersionUID作用
    oracle的oci和thin区别
  • 原文地址:https://www.cnblogs.com/pangblog/p/3258056.html
Copyright © 2011-2022 走看看