zoukankan      html  css  js  c++  java
  • CSS中overflow:hidden在ie6、ie7无效不能隐藏解决办法

    在我们做前端时会碰到一个固定的宽度当文字超过我们这个固定宽度时我们不换行的同时希望文字隐藏了, 那我们通常会使用overflow:hidden来隐藏文字,但是发现在ie6,ie7下overflow:hidden无效了,那么如何解决这个问题呢?

    这就是ie6、ie7 的bug。

    解决方法:

    当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidden属性就会失效。
    我们在IE 6 7内发现子元素会超出父元素设定的高度,即使父元素设置了overflow:hidden。

    解决这个bug很简单,在父元素中使用position:relative;即可解决该bug。

    例子

    代码如下
    复制代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css"> 
    .parent{
        width:100px;
        height:100px;
        position:absolute;
        border:1px solid #f00;
    } 
    .son{
        width:100px;
        height:100px;
        left:0;top:0;
        overflow:hidden;
        position:relative;
    } 
    p{margin:0;padding:0;}
    </style> 
    </head>
    <body>
    
    <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>
    
    </body>
    </html>

    解决原理是:子元素设置绝对定位,父元素相对定位,这样overflow:hidden就不会失效了

  • 相关阅读:
    Redis Cluster 剔除节点失败
    redis cluster 常用操作
    pika版本特性研究
    ueditor的集成
    pyhon类
    python之eval简述
    Python:list,tuple
    Python函数式编程学习:lambda, map, reduce, filter、sorted()、lambda、decorator
    Python中字典详解
    Python调用(运行)外部程序
  • 原文地址:https://www.cnblogs.com/xiaoky/p/4640861.html
Copyright © 2011-2022 走看看