IE中overflow:hidden失效问题

最新推荐文章于 2022-04-06 21:56:59 发布
最新推荐文章于 2022-04-06 21:56:59 发布
阅读量358 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： ie bug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zubo_liang/article/details/43407463
本文介绍了当父元素的子元素使用了position:relative属性时，如何解决父元素overflow:hidden属性失效的问题。通过简单地为父元素添加position:relative即可解决此bug。

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

问题原因：当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时，父元素的overflow:hidden属性就会失效。
解决办法：在父元素中使用position:relative;即可解决该bug，也就是你用到overflow的父节点中增加相对定位即可。
zubo_liang
关注
深入理解：overflow:hidden——溢出,坍塌,清除浮动
全栈启示录
05-02 3万+
深入理解：overflow:hidden——溢出,坍塌,清除浮动overflow：hidden是overflow属性的一个神奇用法，它可以帮助我们隐藏溢出的元素，清除浮动和解除坍塌。当某一个属性拥有这么多的功能时，难免使人难以把握，不过不要怕，只要信：看完这篇文章，我相信你绝对能对overflow:hidden的用法熟练掌握。下面的代码将作为基本演示代码，每次讲解一个新的作用，我们都要将代码恢复成下
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”> <
解决IE overflow:hidden无效解决办法
weixin_33812433的博客
10-06 396
产生原因： 当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时，父元素的overflow:hidden属性就会失效。 解决办法： 我们在IE 6内发现子元素会超出父元素设定的高度，即使父元素设置了overflow:hidden。解决这个bug很简单，在父元素中使用position:relative;即可解决该bug ie7和ie6 发现在ie6和ie7里...
ie浏览器中 overflow：hidden无作用的解决方案
weixin_33857679的博客
07-24 314
原因： overflow:hidden失效当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时，父元素的overflow:hidden属性就会失效。我在ie内发现子元素会超出父元素设定的高度，即使父元素设置了overflow:hidden。 方法：解决这个bug很简单，在父元素中使用position:relative;即可解决该bug我的办法：子元素设置...
关于overflow:hidden
JINisSun
01-30 871
overflow:hidden这个CSS样式是大家常用到的CSS样式，但是大多数人对这个样式的理解仅仅局限于隐藏溢出， 而对于清除浮动这个含义不是很了解。一提到清除浮动，我们就会想到另外一个CSS样式：clear:both，我相信 对于这个属性的理解大家都不成问题的。但是对于“浮动”这个词到底包含什么样的含义呢？我们下面来详细的阐述一下。  这是一个常用的div写法，下面我们来书写样
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;/*高度是想要设置的高度*/这样就可以实现了。
overflow:hidden
haodongquan的专栏
12-08 952
overflow:hidden这个CSS样式是大家常用到的CSS样式，但是大多数人对这个样式的理解仅仅局限于隐藏溢出，而对于清除浮动这个含义不是很了解。 一提到清除浮动，我们就会想到另外一个CSS样式：clear:both，我相信对于这个属性的理解大家都不成问题的。但是对于“浮动”这个词到底包含什么样的含义呢？我们下面来详细的阐述一下。这是一个常用的div写法，下面我们来书写样式。
IE对于overflow:hidden;及其它CSS属性不兼容问题
热门推荐
lisa890608的专栏
12-19 1万+
CSS对浏览器的兼容性有时让人很头疼，或许当你了解当中的技巧跟原理，就会觉得也不是难事，从网上收集了IE7,6与Fireofx的兼容性处理技巧并 整理了一下。对于web2.0的过度，请尽量用xhtml格式写代码，而且DOCTYPE 影响 CSS 处理，作为W3C的标准，一定要加 DOCTYPE声明。 1.对于在IE下不兼容overflow:hidden;而FF下兼容的情况 加一个 positi
模态框
qq_38796823的博客
09-10 405
<!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-U...
深入理解：overflow:hidden——溢出、坍塌、清除浮动
全栈测试笔记
04-29 976
overflow: hidden是overflow属性的一个神奇用法，它可以帮助我们隐藏溢出的元素，清除浮动和解除坍塌。当某一个属性拥有这么多的功能时，难免使人难以把握，不过不要怕，只要信：看完这篇文章，我相信你绝对能对overflow:hidden的用法熟练掌握。 下面的代码将作为基本演示代码，每次讲解一个新的作用，我们都要将代码恢复成下面这个样子： <!DOCTYPE html&g...
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 —— 隐藏溢出，清除浮动，解除坍塌
分享，让视野更宽阔
02-09 1265
1.overflow：hidden 隐藏溢出 默认情况，父div的高宽是auto —— 它可以被子div任意地撑大，但是如果父div设定了高宽，而子div也设定了高宽且超过父div的高宽，超过部分会溢出，此时我们可以给父div使用 overflow：hidden 来隐藏子元素溢出的部分，达到排版优化。 2.overflow：hidden 清除浮动 如图1，当给子div（蓝红）...
css overflow: hidden——隐藏溢出、清除浮动、解决坍塌问题
树上骑个猴的博客
04-06 1万+
overflow:hidden 的主要功能有三个 隐藏溢出 清除浮动 解除坍塌 举例理解 1.初始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-C
父元素有overflow: hidden，有影响吗？
最新发布
06-27
在用户代码中，固定定位元素的父元素是`rootPro`，它没有设置`overflow:hidden`（从提供的样式看），所以应该不会有这个问题。但是，如果`rootPro`的父元素设置了`overflow:hidden`，则可能导致固定定位元素被裁剪。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值