IE下overflow:hidden失效的解决方法

最新推荐文章于 2025-03-22 10:26:41 发布
最新推荐文章于 2025-03-22 10:26:41 发布
阅读量2.5k 收藏
点赞数 2
CC 4.0 BY-SA版权
分类专栏： Web前端 文章标签： javascript 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ForeverCjl/article/details/16842445
本文探讨了在IE6和IE7浏览器下，当父元素设置overflow：hidden时，若子元素设置为relative或absolute定位，导致overflow效果失效的问题，并提供了一个解决方案——给父元素添加relative定位，以确保overflow：hidden属性正常工作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

如果父对象有overflow：hidden属性，子对象中的position属性是relative或者absolute，那么在ie6和ie7下父对象的overflow会失效，解决办法是给父对象加relative属性。

 

在IE6或IE7下

如果父节点设置了overflow：hidden样式，且子节点设置了position属性的relative或absolute，则父节点的overflow：hidden将会失效

解决方法是给父节点也加上position：relative样式。

IE overflow:hidden失效的解决方法
12-10
overflow:hidden失效 当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时，父元素的overflow:hidden属性就会失效。 我们在IE 6内发现子元素会超出父元素设定的高度，即使父元素设置了overflow:hidden。 解决这个bug很简单，在父元素中使用position:relative;即可解决该bug 我的办法：子元素设置绝对定位，父元素相对定位，这样overflow:hidden就不会失效了。 IE下CSS溢出隐藏失败(IE overflow:hidden失效) 复制代码代码如下: <div id=”slides-pic”> <
ie6、ie7下overflow失效的有效解决方法
12-13
今天遇到了ie6 ie7浏览器下，overflow:hidden; 失效的情况，经过测试和排查，发现原来ie6,ie7有一个很坏的习惯就是：如果父对象有overflow：hidden属性，子对象中的position属性是relative或者absolute，那么在ie6和ie7下父对象的overflow会失效。  解决办法是给父对象加relative属性。
ie7设置overflow属性失效解决方法
weixin_39330484的博客
07-12 745
在项目中遇到 IE7 浏览器设置 overflow:hidden , overflow: auto; 都无效 ！ 父元素设置固定宽高属性并加 overflow属性 (意图使超出部分能够隐藏或者滚动)， 子元素设置了position:relative 或position:absolute属性 ，ie7浏览器下超出父元素的子元素区域部分不能被隐藏掉！ 解决方法： 给元素也加上position:rel...
IE7的overflow失效的解决方法
lixiaoxia0805的博客
05-10 171
给父层div设置一个position:relative。
IE6 Bug overflow:hidden失效
09-25
总之，`IE6 Bug overflow:hidden失效`是一个经典且知名的CSS兼容性问题，它涉及到`position:relative`与`overflow:hidden`的交互。通过为父元素添加`position:relative`可以修复此问题，但这也可能带来其他的布局...
IE8 css overflow:hidden不起作用
01-21
原来这样设置，IE6、IE7、FF都是可以实现的，但IE8不可以，原因是IE把overflow:hidden禁止了。如果实现同样的效果，要添加样式display:inline-block;height:30px;/*高度是想要设置的高度*/这样就可以实现了。
ie8的body不兼容overflow:hidden的问题
weixin_34111790的博客
03-02 145
body{ overflow:hidden; } 在ie8下有显示问题能够手动移动div位置 进过测试在ie7下也有类似问题 替换成html { overflow:hidden; } 即可做到隐藏滚动条且兼容一切浏览器 转载于:https://blog.51cto.com/boyzhou99/504156...
CSS中：overflow:hidden的作用
weixin_30822451的博客
03-05 249
功能1、隐藏溢出 在IE6下，当子容器的宽高超出父容器时，父容器就会被撑开来。 要想解决这个问题，在父容器中除定义宽和高的值以外，还必须写overflow:hidden，这样就能把子容器的其它内容隐藏。 但是在火狐或者其他浏览器里面，我们发现问题并非如此简单。我们发现，当子容器这个div的宽度和高度都大于父容器这个div的时候，父容器并没有被内撑开...
关于overflow:hidden
JINisSun
01-30 871
overflow:hidden这个CSS样式是大家常用到的CSS样式，但是大多数人对这个样式的理解仅仅局限于隐藏溢出， 而对于清除浮动这个含义不是很了解。一提到清除浮动，我们就会想到另外一个CSS样式：clear:both，我相信 对于这个属性的理解大家都不成问题的。但是对于“浮动”这个词到底包含什么样的含义呢？我们下面来详细的阐述一下。  这是一个常用的div写法，下面我们来书写样
IE8 overflow:hidden 失效
kongjunchao159的博客
08-06 1100
IE6、IE7、IE8 overflow:hidden 失效 解决办法： 当父元素的直接子元素或者下级子元素拥有样式position:relative属性时，父元素的overflow:hidden就会失效 在父元素中加上position:relative即可
overflow:hidden
lb2917的博客
03-22 527
overflow:hidden
overflow：hidden
u013030203的博客
10-18 366
这篇文章主要overflow：hidden清除浮动。 1.问题：设置了浮动的元素将父元素的同级元素覆盖 有三个div，#div2 中有三个浮动的div，这时候 #div3 被覆盖。 #div1{ background: blue; height: 100px; } .div1{
CSS中overflow：hidden
Im_IronMan的博客
06-08 792
float：left 会让元素脱离文档流。如果一个元素（先称其为父元素），他的子元素都设置成float：left了，同时父元素没有设置高度。这时会造成父元素的高度为0.（如果有一个子元素没有设置float，会把父元素给撑起来）。 overflow：hidden。会消除所有的子元素的浮动，然后进行自适应高度计算，因为父元素没有设定高度，所以不会进行裁剪 ...
CSS样式规则：overflow：hidden；
m0_67989094的博客
01-14 887
第一点：当应用这个样式规则时，它会隐藏元素内部溢出的内容，并且不显示滚动条。这是一个很长的文本内容，超过了容器的高度。是一种CSS样式规则，它通常用于处理元素内容溢出的情况。第二点:解决图片使用float浮动样式时，失标。
CSS 深入理解：overflow: hidden——隐藏溢出、清除浮动、解除坍塌
热门推荐
树上骑个猴的博客
02-17 1万+
overflow:hidden 的主要功能有三个： 隐藏溢出 清除浮动 解除坍塌 举例理解 初始html内容： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co
父元素有overflow: hidden，有影响吗？
最新发布
06-27
当父元素同时设置以下属性时，会创建新的层叠上下文，导致 `fixed` 定位失效： ```css .parent { overflow: hidden; /* 关键属性 */ position: relative; /* 或 absolute/fixed */ border-radius: 25px; /* 非...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值