当前位置:首页> 正文
解决IE6,IE7不能隐藏(overflow:hidden)绝对定位溢出的内容
令人蛋疼的IE,IE6/IE7下父元素有相对/绝对定位时,子元素在IE6和IE7下overflow:hidden;失效。
情况一:(在parent上增加position:relative)
复制代码代码如下:
style type="text/css"
.parent{ width:100px; height:100px;border:1px solid #f00; overflow:hidden; position:relative;}
.sonF{ position:relative;}
.son{ width:100px; height:100px; position:absolute; left:0;top:0;}
p{margin:0;padding:0;}
/style
/head
body
div class="parent"
div class="sonF"
div class="son"
paaaaaaaaaaaaaa/p
paaaaaaaaaaaaaa/p
paaaaaaaaaaaaaa/p
paaaaaaaaaaaaaa/p
paaaaaaaaaaaaaa/p
paaaaaaaaaaaaaa/p
pbbbb/p
pbbbbb/p
/div
/div
/div
情况二:(给son增加position:relative)
复制代码代码如下:
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
div class="parent"
div class="son"
paaaaaaaaaaaaaa/p
paaaaaaaaaaaaaa/p
paaaaaaaaaaaaaa/p
paaaaaaaaaaaaaa/p
paaaaaaaaaaaaaa/p
paaaaaaaaaaaaaa/p
paaaaaaaaaaaaaa/p
paaaaaaaaaaaaaa/p
/div
/div
如下图:
如果.parent中的position设置为absolute也是如此。
终上所述:
哪个需要设置overflow;hidden,生效,就在哪个上面设置position:relative;
情况一:(在parent上增加position:relative)
复制代码代码如下:
style type="text/css"
.parent{ width:100px; height:100px;border:1px solid #f00; overflow:hidden; position:relative;}
.sonF{ position:relative;}
.son{ width:100px; height:100px; position:absolute; left:0;top:0;}
p{margin:0;padding:0;}
/style
/head
body
div class="parent"
div class="sonF"
div class="son"
paaaaaaaaaaaaaa/p
paaaaaaaaaaaaaa/p
paaaaaaaaaaaaaa/p
paaaaaaaaaaaaaa/p
paaaaaaaaaaaaaa/p
paaaaaaaaaaaaaa/p
pbbbb/p
pbbbbb/p
/div
/div
/div
情况二:(给son增加position:relative)
复制代码代码如下:
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
div class="parent"
div class="son"
paaaaaaaaaaaaaa/p
paaaaaaaaaaaaaa/p
paaaaaaaaaaaaaa/p
paaaaaaaaaaaaaa/p
paaaaaaaaaaaaaa/p
paaaaaaaaaaaaaa/p
paaaaaaaaaaaaaa/p
paaaaaaaaaaaaaa/p
/div
/div
如下图:
如果.parent中的position设置为absolute也是如此。
终上所述:
哪个需要设置overflow;hidden,生效,就在哪个上面设置position:relative;
展开全文阅读
相关内容
-
ie11兼容模式在哪?IE11兼容模式怎么设置
ie11兼容模式在哪?IE11兼容模式怎么设置,兼容模式,设置,网站,...
-
如何彻底优化IE浏览器 六种设置方法轻松优化你
如何彻底优化IE浏览器 六种设置方法轻松优化你的IE浏览器,方...
-
为ie和chrome单独设置样式的方法
为ie和chrome单独设置样式的方法,设置,方法,这是,复制,样式,...
-
在Surface中IE浏览器触摸版和桌面版的设置使用
在Surface中IE浏览器触摸版和桌面版的设置使用技巧,设置,桌面...
-
下拉菜单select样式设置(兼容IE6/IE7/IE8/火狐)
下拉菜单select样式设置(兼容IE6/IE7/IE8/火狐),兼容,火狐,设...
-
拥有最小高度能自适应高度同时全兼容IE、FF的di
拥有最小高度能自适应高度同时全兼容IE、FF的div设置,兼容,设...
-
兼容IE和FF的单行溢出文本显示省略号
兼容IE和FF的单行溢出文本显示省略号,溢出,省略号,兼容,文本,...
-
通过修改注册表来设置IE10为非兼容性视图
通过修改注册表来设置IE10为非兼容性视图,视图,兼容性,设置,...
-
ie不能设置空白页如何解决ie无法使用空白页
ie不能设置空白页如何解决ie无法使用空白页,设置,修改,恶意,...
-
完美兼容ie和firefox的asp.net网站加入收藏和设
完美兼容ie和firefox的asp.net网站加入收藏和设置主页,兼容,...
-
IE浏览器不能运行js JS代码失效不能运行了如何
IE浏览器不能运行js JS代码失效不能运行了如何解决,运行,浏览...
-
IE浏览器怎么设置为单进程模式?
IE浏览器怎么设置为单进程模式?,单进程,模式,浏览器,修改,键值...
-
巧妙设置 IE9浏览器为电脑节能省电
巧妙设置 IE9浏览器为电脑节能省电,浏览器,设置,更改,点击,省...
-
如何设置IE7阻止弹出窗口
如何设置IE7阻止弹出窗口,弹出窗口,网页,执行,网站,拦截,设置...
-
在IE7中教你设置多个主页的秘技
在IE7中教你设置多个主页的秘技,主页,设置,输入,网站,秘技,启...