兼容性—IE6/7下带有overflow:hidden属性的父级元素包不住带有position:relative属性的子元素

IE6/7下带有overflow:hidden属性的父级元素包不住带有position:relative属性的子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            border:10px solid black;
            overflow: hidden;
        }
        .content{
            width: 400px;
            height: 400px;
            background: red;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="content"></div>
    </div>
</body>
</html>

显示效果如下:

解决方案:给父级也加上position:relative;属性

.box{
    width: 200px;
    height: 200px;
    border:10px solid black;
    overflow: hidden;
    *position: relative;
}
.content{
    width: 400px;
    height: 400px;
    background: red;
    position: relative;
}
时间: 2024-12-19 18:27:23

兼容性—IE6/7下带有overflow:hidden属性的父级元素包不住带有position:relative属性的子元素的相关文章

解决IE6,IE7不能隐藏(overflow:hidden)绝对定位溢出的内容

IE6/IE7下父元素有相对/绝对定位时,子元素在IE6和IE7下overflow:hidden;失效,下面与大家分享下导致以上问题发生的情况及解决方法 令人蛋疼的IE,IE6/IE7下父元素有相对/绝对定位时,子元素在IE6和IE7下overflow:hidden;失效. 情况一:(在parent上增加position:relative) 代码如下: <style type="text/css"> .parent{ width:100px; height:100px;bo

CSS中&quot;position:relative&quot;属性与文档流的关系

前言 近期遇到一个问题--"position:relative"到底会不会导致元素脱离文档流?主流观点是不会,但都给不出一个有说服力的论据.最后我自己佐证了一番,总算有了个结果:"position:relative"不会导致元素脱离文档流. 博文地址:CSS中"position:relative"属性与文档流的确切关系 "relative"与文档流 说到标准,最权威的自然莫过于CSS标准文档.经过一番繁琐的查找之后(w3c网站

解决td标签上的position:relative属性在各浏览器中的兼容性问题

在css中的position属性规定了页面元素的定位类型,它有以下几个值: absolute:绝对定位,相对于static以外的第一个父元素进行定位: fixed:生成绝对定位的元素,相对于浏览器窗口进行定位: relative:生成相对定位的元素,相对于其正常位置进行定位: static:默认值,没有定位: inherit:继承父元素的position值: 如果一个块A要在块B中进行绝对定位,则我们可以把块A的position值定为absolute,把块B的属性值定为relative,这样,块

解决element生成的下拉菜单,不在父级之下,而是在body之下,通过父级控制该下拉菜单的样式,达到不跟别的地方冲突的目的

项目中存在多个下拉菜单,每个下拉菜单的样式可能不同 不能直接拿到element里面的类名来修改,这样会导致全局统一 在下拉菜单上定义一个父级类名,通过这个父级类名来定义这些下拉菜单的样式,达到私有化 遇到问题,生成的下拉菜单跟父类不在同一个节点,无法通过父级类来指定样式 解决方案:在下拉菜单的结构上添加 ref,页面加载后动态添加父级类名 原文地址:https://www.cnblogs.com/wuhefeng/p/12530803.html

兼容性—IE6/7下当li里面的元素都浮动,li之间会产生4px的缝隙

代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> ul{ margin: 0px; padding: 0px; width: 300px; list-style: none; } li{ height: 30px; line-heig

overflow:hidden清除浮动原理解析及清除浮动常用方法总结

最近在看<CSS Mastery>这本书,里面有用overflow:hidden来清理浮动的方法.但是一直想不明白为什么能够实现清除浮动,查阅了网络上的解释,下面来总结一下. 一.首先来想想 我们大家理解的overflow:hidden是超出该元素的部分进行隐藏.这个时候就需要明确一点,该元素的高度是怎么定义的.当一个div中的两个元素浮动之后,此时div的高度就会塌陷,此时div的高度为0.那是不是意味着就要将浮动元素隐藏起来,如果是真的隐藏就是反布局常识的.所以这中间肯定有我们现在还不知道

css中position:relative和overflow:hidden的问题

<div style="height:100px; width:100px; background:#CCC; overflow:hidden;"> <div style="height:300px; width:90px; background:#999; position:relative;"></div> </div> ↓ 解决方案:将父标签的position也设置成relative,代码如下: <div 

CSS中overflow:hidden在ie6、ie7无效不能隐藏解决办法

在我们做前端时会碰到一个固定的宽度当文字超过我们这个固定宽度时我们不换行的同时希望文字隐藏了, 那我们通常会使用overflow:hidden来隐藏文字,但是发现在ie6,ie7下overflow:hidden无效了,那么如何解决这个问题呢? 这就是ie6.ie7 的bug. 解决方法: 当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidden属性就会失效.我们在IE 6 7内发现子元素会超出父元素设定的高度,即使父元素设置了o

css ie6、ie7、ie8中overflow:hidden无效解决办法

产生原因: 当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidden属性就会失效. 解决办法: 我们在IE 6内发现子元素会超出父元素设定的高度,即使父元素设置了overflow:hidden.解决这个bug很简单,在父元素中使用position:relative;即可解决该bug ie7和ie6 发现在ie6和ie7里面overflow:hidden无效,还是会超出外层div 后来在外层div上面加上position:rela