当子元素过高导致父元素出现滚动条时,它并不会像预期的那样呆在父元素里,而是浮在父元素之上,并且位置不随滚动条的移动而改变。根源就是子元素的"position:relative"。目前只发现ie中有此问题。 
页面源码: 

Html代码  
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html>
  4. <head>
  5. <title>relative bug</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  7. <style type="text/css">
  8. <!--
  9. #container {
  10. background:blue;
  11. height:100px;
  12. width:300px;
  13. overflow:auto;
  14. /*position:relative;*/
  15. }
  16. #container>div {
  17. background:red;
  18. height:300px;
  19. width:150px;
  20. margin:0 auto;
  21. position:relative;/*这句会触发bug*/
  22. }
  23. -->
  24. </style>
  25. </head>
  26. <body>
  27. <div id="container">
  28. <div></div>
  29. </div>
  30. </body>
  31. </html>

解决方法:为父元素也添加"position:relative"设置。在上例中,只需把#container的注释还原即可。 
以下是正常页面:

"position:relative"在IE中的Bug的更多相关文章

  1. 解决td标签上的position:relative属性在各浏览器中的兼容性问题

    在css中的position属性规定了页面元素的定位类型,它有以下几个值: absolute:绝对定位,相对于static以外的第一个父元素进行定位: fixed:生成绝对定位的元素,相对于浏览器窗口 ...

  2. css中position:relative的真正理解

    其实话说一直以来也没真正去理解好position:relative的用法的真实意义. 我想很多人实实在在用的多都是position:relative和position:absolute结合起来一起用的 ...

  3. CSS中"position:relative"属性与文档流的关系

    前言 近期遇到一个问题--"position:relative"到底会不会导致元素脱离文档流?主流观点是不会,但都给不出一个有说服力的论据.最后我自己佐证了一番,总算有了个结果:& ...

  4. CSS中margin和position:relative的定位问题

    一.代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  5. position:relative和z-index解决元素边框重合小bug

    由于margin-left:-1;导致一边重合造成以上情况. 解决方法:给元素增加position:relative样式,且给选中的样式增加z-index:1;高于其他未选中元素即可解决.

  6. iphone下元素放在了一个position: fixed的div中无法点击

    网上的说法是这样的: iphone的浏览器有这么一个bug, 当你使用锚定或滚动页面后, 你会发现某些东西不能点击了! 如果你的这个“东西”放在了一个position: fixed的div中, 那么你 ...

  7. CSS position relative absolute fixed

    position属性absolute与relative 详解   最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...

  8. 转:移动开发中一些bug及解决方案

    网页开发要面对各种各样的浏览器,让人很头疼,而移动开发中,你不但要面对浏览器,还要面对各种版本的手机,iOS好一点,而安卓就五花八门了,你可能在开发中也被它们折磨过,或者正在被它们折磨,我在这里说几个 ...

  9. IE7下position:relative的问题

    如果在IE7中使用position:relative属性,需要在该元素的容器上,同时给予position:relative属性.

随机推荐

  1. 如何用Windbg找到被catch住的C++的异常

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:如何用Windbg找到被catch住的C++的异常.

  2. 转:FORM:客制化Form的菜单栏和右鍵菜單

    Oracle EBS还允许客制化Form的菜单栏. 用户最多可以定义45个form-level的trigger,名称必须为SPECIALn, 其中SPECIAL1 to SPECIAL15属于Tool ...

  3. 构建本地yum源之rpmbuild问题汇总

    - check-rpaths的问题 今天在编译varnish的时候,遇到几个问题,其中一个就是出现如下错误: ...+ /usr/lib/rpm/check-rpaths /usr/lib/rpm/c ...

  4. C++学习(二)

    九.3.内联1)编译器用函数的二进制代码替换函数调用语句,减少函数调用的时间开销.这种优化策略成为内联.2)频繁调用的简单函数适合内联,而稀少调用的复杂函数不适合内联.3)递归函数无法内联.4)通过i ...

  5. Wireshark - 过滤规则

    使用 Wireshark 的默认设置抓包时,会得到大量的冗余信息,以至于很难找到自己所需的封包.使用过滤器可以帮助我们在庞杂的结果中快速地找到我们所需的封包.过滤器分为两种:捕捉过滤器和显示过滤器. ...

  6. java 静态方法

    在使用java的时候,你会发现,有些对象,需要new ,有些则不需要时,比如Math类 ); 如果你查看源码就会大致的发现,里面的属性和方法都是静态的: public static double si ...

  7. Force removing ActivityRecord,app died, no saved state报错的理解

    为什么说理解呢?出现这个问题,我的情景是,在activity里面直接起了一个Thread,线程里面进行了一个繁重的任务,当线程执行完后,这个activity也销毁了,界面显示的任务栈下面的一个活动.百 ...

  8. 用变量a给出下面的定义

    a)一个整型数(An integer)b) 一个指向整型数的指针(A pointer to an integer)  c) 一个指向指针的的指针,它指向的指针是指向一个整型数(A pointer to ...

  9. 经历:sybase的sql查询,当传递的参数中包含全角空格(\u00a0),查询慢

    今天,我遇到了一个sybase数据库查询的问题.一句简单的sql,但是不知道为什么查询不出来,导致生产生产服务器频频挂掉.吓得我的小心脏砰砰啊. select DISTINCT A.FCIL_CDE ...

  10. Ext.Net学习笔记03:Ext.Net MessageBus用法

    发布和订阅消息 Ext.Net MessageBus 的本质是一个消息订阅机制,ExtJS中没有这种机制,所以MessageBus的Ext.Net实现的,但并不是原创,这种功能在dojo中早就实现了, ...