`

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属性就会失效。

    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 

    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....

    上下tab浮动菜单

    position:relative; background:#eee; padding:2em; text-align:center;} #outer h2 {margin-bottom:1em;} #navigation {background:transparent; margin:0 auto; height:3em; /* hide overflow:hidden from IE5/...

    程序员面试刷题的书哪个好-Front-end-Interview:面试

    ·图层定位:z-index必须与position属性一起使用,同值按照书写顺序重叠上去 2.overflow的值: ·hidden:超出长宽的内容不显示 ·scroll:无论长款超不超出,都加入滚动条 ·auto:视情况决定是否加入滚动条 3.如何...

Global site tag (gtag.js) - Google Analytics