`

IE7下POSITION:RELATIVE与OVERFLOW的问题

    博客分类:
  • css
ie 
阅读更多

父容器设置overflow:auto;子元素设置属性position:relative;在ie6、ie7中该子元素不随滚动条滚动。

解决办法:

给设置了overflow:auto属性的父容器也加上position:relative。

下面贴出代码:

<div style="width:200px;height:300px; overflow:auto;"> <div style="width:100px;height:500px;"> <p>ie7动</p> <p style="position:relative;">position:relative;ie7不动</p> <p>ie7动</p> </div></div>

http://hi.baidu.com/danghj/item/d686331399297fa4feded5df

分享到:
评论

相关推荐

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

    在父标签中使用了overflow:hidden;时,如果子标签中有元素的position设置成relative的时候,在IE6和IE7中父元素的overflow对其将不起作用,其实将父标签的position也设置成relative便可解决此问题

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

    令人蛋疼的IE,IE6/IE7下父元素有相对/绝对定位时,子元素在IE6和IE7下overflow:hidden;失效。 情况一:(在parent上增加position:relative) 复制代码代码如下: &lt;style type=”text/css”&gt; .parent{ width:...

    ie7中overflow:auto无效的解决方法

    产生原因当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:auto属性就会失效。 解决办法解决这个bug很简单,在父元素中使用position:relative;即可解决该bug。 代码bug重现 ...

    IE overflow:hidden失效的解决方法

    overflow:hidden失效 当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidden属性就会失效。 我们在IE 6内发现子元素会超出父元素设定的高度,即使父元素设置了overflow:...

    三星9305收索

    你就知道&lt;/title&gt;&lt;style index="index" &gt;html,body{height:100%}html{overflow-y:auto}#wrapper{position:relative;_position:;min-height:100%}#head{padding-bottom:100px;text-align:center;*z-index:1}#ftCon{...

    ie6、ie7下overflow失效的有效解决方法

    如果父对象有overflow:hidden属性,子对象中的position属性是relative或者absolute,那么在ie6和ie7下父对象的overflow会失效

    IE6 Bug overflow:hidden失效

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

    JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome.docx

    本文主要共享了使用原生 JavaScript 实现自定义浏览器滚动条兼容 IE、火狐和 chrome 的思路与方法。通过 JavaScript 实现自定义浏览器滚动条,可以实现跨浏览器的滚动条样式统一,提高用户体验。 一、为什么需要...

    asp.net 菜单 menu

    position:relative;} .menu ul li ul {display: none;} /* specific to non IE browsers */ .menu ul li:hover a {color:#fff; background:#028DE8;}/*一级菜单事件*/ .menu ul li:hover ul {display:block; ...

    CSS 实现未知内容高度的垂直水平居中(改良版)

    垂直居中在IE浏览器下的实现比较难实现,而更难实现的应该是未知内容高度的垂直水平居中!还好网上也有很多高人发布了一些解决的方法!这里我进行了一些改良,兼容FF,IE6,IE7,Opera…如发现问题有劳回复评论! ...

    javascript之dhDataGrid Ver2.0.0代码

    针对dhDataGrid的前一版本Ver1.0.0而做的更新... CSS: /*dhdatagrid 大块样式*/ #dhdatagrid {position:relative;width:500px;height:200px;background:white;margin:0px;padding:0px;overflow:hidden;border:1px 

    html5css3面试题及答案,前端面试题及答案-CSS篇.docx

    + 使用 position: relative 和 position: absolute + 使用 display: table 和 display: table-cell 本文档旨在提供一个详细的 CSS 知识点总结,涵盖了 CSS 的新特性、选择符、盒模型、浮动、垂直居中等多个方面,...

    IE6/7在滚动区域内的标签使用position会飘出这个滚动区域不随滚动条滚动

    最近才发现IE6、IE7存在这样一个BUG:在滚动区域(DIV中)内,如果里面的标签使用了position(absolute/relative),则会飘出这个滚动区域,且不会随滚动条而滚动(静止不动)。如下所示(只在IE6和IE7中才会出现此...

    雅虎TAB效果代码 Javascript实现

    position:relative;} #adsie {position:absolute; bottom:0;} /* ================================================================ This copyright notice must be untouched at all times. The original ...

    图片翻转效果具体实现代码

    以下为程序代码: 代码如下: &lt;!... &lt;head&gt; &lt;... charset=gb2312″ /&gt; &lt;meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ /&gt;...position:relative;} .txt {width:100%;height:100%;ba

    好看的下拉菜单

    position:relative; margin:0; font-size:11px; margin:50px 0;} .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#...

    淘宝大图轮播

    //变态的ie6和ie7的img如果为relative,需要设置其父节点也为relative,否则overflow:hidden无效 expand.style.position = "relative"; expand.style.left = "0"; expand.style.top = "0"; } expImg = document....

Global site tag (gtag.js) - Google Analytics