当子元素过高导致父元素出现滚动条时，它并不会像预期的那样呆在父元素里，而是浮在父元素之上，并且位置不随滚动条的移动而改变。根源就是子元素的"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. easyui datagrid用formtater的问题

    当value是一个字符串是直接使用value会提示value没有定义,这时需要转换下value,用""+value来替换就可以了.

  2. EditPlus保存文件时不生成其备份文件的方法

    3.将“保存时去掉备份文件”复选框去掉,点击 应用->确定,即可 .

  3. PL/SQL Developer 在windows7 64位系统下连Oaracle11g64位系统的解决经验

    PL/SQL Developer 在windows7 64位系统下连Oaracle11g64位系统的解决经验 一.问题现象及解决方法 现象: 1.PL/SQL 无法登录64位数据库 2.在PL/SQL ...

  4. Android图片压缩

    import java.io.File;import java.io.FileNotFoundException;import java.io.FileOutputStream;import java ...

  5. Top 10 Questions about Java Exceptions--reference

    reference from:http://www.programcreek.com/2013/10/top-10-questions-about-java-exceptions/ This arti ...

  6. ydoc 参考系列

    多个iframe支持 [http://ionicframework.com/docs/components/#icon-buttons]

  7. Android和Java的轻巧Wire协议缓冲器

    Wire协议缓冲器 一个人必须有一个代码! -奥马尔小 由于我们的团队和项目增长,数据的种类和数量也随之增加. 成功将您简单的数据模型转换为复杂的! 无论您的应用程序将数据存储到磁盘或网络传送信号,该 ...

  8. [Form builder]:about SYSTEM.MESSAGE_LEVEL

    If you want to suppress error messages then you have to set a system variable :system.message_level. ...

  9. C#操控条形码扫描枪

    // 条码扫描器 // 窗体部分相关代码: using System; using System.Collections.Generic; using System.ComponentModel; u ...

  10. BFM1

    BFM应该描述的是具有某种具体功能的电路.比如说,你的待测电路是一个智能卡,那他的BFM就是读卡器:那你就要根据协议,在BFM中描述出读卡器的具体行为. 写BFM就类似于写testbench了.BFM ...