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

最新推荐文章于 2019-09-20 18:52:25 发布
转载 最新推荐文章于 2019-09-20 18:52:25 发布 · 552 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://www.mk2048.com/blog/blog.php?id=1c2j2b1jb&title=ie6%E3%80%81ie7%E3%80%81ie8%E4%B8%ADoverflow%3Ahidden%E6%97%A0%E6%95%88%E8%A7%A3%E5%86%B3%E5%8A%9E%E6%B3%95
文章标签：

#前端兼容

本文探讨了在IE6、IE7、IE8浏览器中遇到的overflow:hidden属性失效的问题，特别是在父元素的子元素使用了position:relative的情况下。文章提供了一个简单的解决方案，即在父元素上也应用position:relative属性，以此来修复背景图超出隐藏区域的显示问题。
产生原因：

当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时，父元素的overflow:hidden属性就会失效。

解决办法：

我们在IE 6内发现子元素会超出父元素设定的高度，即使父元素设置了overflow:hidden。
解决这个bug很简单，在父元素中使用position:relative;即可解决该bug


实例：在太湖站中body背景图超出隐藏使用overflow-x:hidden，IE7不生效！在body中加position:relative,完美解决！



转载请注明：前端录»ie6、ie7、ie8中overflow:hidden无效解决办法

<script src="http://www.wozhuye.com/index.php?m=digg&c=index&a=init&id=3-288-2"></script>
ie8 body overflow hidden 无效的解决方法
12-11
总的来说，解决 `body overflow hidden` 在IE8下无效的方法是将样式应用到 `html` 元素，而非 `body` 元素，这样可以实现跨浏览器的兼容性。但在实际开发中，还需要综合考虑用户体验和浏览器兼容策略，以确保网站在...
CSS表达式(expression)解决IE6 position:fixed无效问题
09-25
本文将详细讲解如何使用CSS表达式（expression）来解决IE6中`position:fixed`无效的问题。 首先，我们来看一个常见的解决方法。在非IE6浏览器中，`position:fixed`可以直接应用到元素上，如下所示： ```css #gs { ...
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
解决IE8下body{ overflow:hidden;}无效的解决办法
weixin_39037804的博客
09-20 292
css中IE8 body{ overflow:hidden;}无效的解决办法： 在页面html中使用: body{ overflow:hidden; } 在ie8下无效 ，仍然有滚动条。 解决的办...
IE8 overflow:hidden 失效
kongjunchao159的博客
08-06 1122
IE6、IE7、IE8 overflow:hidden 失效 解决办法： 当父元素的直接子元素或者下级子元素拥有样式position:relative属性时，父元素的overflow:hidden就会失效 在父元素中加上position:relative即可
ie8下overflow:hidden 无效果
weixin_33963594的博客
01-04 121
清除冲突的css样式
ie8的body不兼容overflow:hidden的问题
weixin_34111790的博客
03-02 158
body{ overflow:hidden; } 在ie8下有显示问题能够手动移动div位置 进过测试在ie7下也有类似问题 替换成html { overflow:hidden; } 即可做到隐藏滚动条且兼容一切浏览器 转载于:https://blog.51cto.com/boyzhou99/504156...
IE中css样式设置height无效的解决方法
09-25
在网页开发过程中，尤其是在兼容...以上方法大多能解决IE中`height`无效的问题，但因为IE的兼容性问题多样且复杂，可能还需要针对具体情况进行调试和调整。熟悉这些技巧，将有助于提高网站在IE上的表现，提升用户体验。
js完美解决IE6不支持position:fixed的bug
12-03
常规的`position:fixed`样式对于IE6无效，因此我们需要用其他方式来模拟这个效果。一种常见的方法是通过设置`html{overflow:hidden}`和`body{height:100%;overflow:auto}`，但这会导致所有`absolute`和`relative`...
IE overflow:hidden失效的解决方法
09-25
position和float是两种布局模式，在IE6下共用有时会导致用position定位的元素节点消失。绝对定位的元素节点是参照离它最近的已定位元素，所以父节点定位relative、子节点定位absolute是很常见的。
万恶的<table>:IE中text-overflow:elipsis无效
weixin_30920513的博客
06-01 278
1.给<table>标签添加css——table-layout:fixed 　　<table style="table-layout:fixed;"></table> 2.给标题的<td>或者<th>添加固定宽度 　　<table style="table-layout:fixed;"> 　　　　<tr> ...
overflow-x 兼容ie8
qq_40774743的博客
08-14 515
<!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-Compa...
IE6、IE7、IE8中overflow:hidden不起作用的情况
clare504的专栏
08-18 7269
解决方案：只需要在设定overflow:hidden层加入定位即可。
IE打印隐藏不想打印的内容
weixin_34217773的博客
08-08 219
今天做打印页面，打印时发现我的按钮也跟着打印出来了，这肯定是不行的，在网上找了好久，都找不到合适的，因为我这个用到了母板页，按钮全部在母板页上面。 用网上搜集到的方法（如下）： <script> //----- 下面是打印控制语句 ---------- window.onbeforeprint=beforePrint; window.onafterprint...
IE10下 .hide()隐藏对象不生效（其它所有主流浏览器都没这个问题）的处理方式
一味前行
05-09 3332
最近遇到了一个浏览器兼容性的一个问题，如题所示，具体解决方式就是：$('#btFrame').hide();$('#btFrame').css('visibility','hidden');如代码中标红部分，本来弄一个div包含object和frame的隐藏，其它浏览器下$('#btFrame').hide();就已经可以搞定了，但是在ie10下就不生效了，请了公司专业的高级交互设计实现也没解决，...
IE10下 .hide()隐藏对象不生效（其它所有主流浏览器都没这个问题）的处理方式
中草药代码
06-03 5302
最近遇到了一个浏览器兼容性的一个问题，如题所示， 具体解决方式就是： $('#btFrame').hide(); $('#btFrame').css('visibility','hidden'); 如代码中标红部分，本来弄一个div包含object和frame的隐藏，其它浏览器下$('#btFrame').hide();就已经可以搞定了， 但是在ie10下就不
解决IE6兼容性问题：常见bug与对策
8. **左浮动元素的margin-bottom无效**：对于左浮动元素，其margin-bottom在IE6中可能不起作用。解决方法包括设定元素高度、使用父元素的_padding-bottom或创建额外的标签来代替margin-bottom。 9. **img底部空白**...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值