交流|分享
26.12.2008
IE6动态改变DIV尺寸后，内层绝对定位的问题
category: CSS
tags:

先看IE6的问题页面

这是一个自适应的圆角DIV。底部的两个圆角是由两个绝对定位的DIV分别设置{left:0;bottom:0;}和{right:0;bottom:0}做成的。所以不管DIV内的文字如何增减，它们始终定位在底部。

但是当内容通过程序动态增加时，但IE6无法响应到外层尺寸出现的变化，原先的绝对定位还是停留在原处。导致DIV被撑破。

解决后的页面 

解决方法：在底部绝对定位的DIV外面套一个position:relative。

代码如下

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.   <title> new document </title>
  5.   <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  6. <style>
  7. *{margin:0;padding:0;font-family:"MS PGothic"}
  8.  
  9. /*roundCorner start*/
  10. .roundCornerOuter {width:482px;position:relative; background:#fffdf8;overflow:hidden;float:left;  }
  11. .roundCornerContent {position:relative; z-index:1; width:100%}
  12.  
  13. .rc_t_l {position:absolute; top:0; background:url(images/roundCorner.gif) -20px -20px;width:20px;height:20px; font-size:1px  }
  14. .rc_t_m {position:absolute;top:0; background:url(images/roundCorner.gif) 0 0 repeat-x;width:100%;height:20px;  font-size:1px   }
  15. .rc_t_m span {position:absolute; background:url(images/roundCorner.gif) -40px 0 repeat-x;width:100%;height:20px;font-size:1px  }
  16. .rc_t_r {position:absolute; right:0;top:0;background:url(images/roundCorner.gif) -40px -20px;width:20px; height:20px;  font-size:1px  }
  17.  
  18. .rc_m_l {position:absolute;top:20px; background:url(images/roundCorner.gif) 0 -20px; width:20px;}
  19. .rc_m_r {position:absolute;top:20px;right:0; background:url(images/roundCorner.gif) -60px -20px; width:20px; }
  20. .rc_m_l span {display:block; background:url(images/roundCorner.gif) 0 20px; width:20px;height:2000px; }
  21. .rc_m_r span {display:block; background:url(images/roundCorner.gif) -60px 20px; width:20px;height:2000px; }
  22.  
  23. .rc_b_l {position:absolute; bottom:0;background:url(images/roundCorner.gif) -20px -40px; width:20px;height:20px;font-size:1px  }
  24. .rc_b_r {position:absolute; bottom:0;right:0;background:url(images/roundCorner.gif) -40px -40px; width:20px;height:20px; font-size:1px   }
  25. .rc_b_m {position:absolute;bottom:0; background:url(images/roundCorner.gif) 0 -60px repeat-x;width:100%;height:20px;  font-size:1px   }
  26. .rc_b_m span {position:absolute; background:url(images/roundCorner.gif) -40px -60px repeat-x;width:100%;height:20px;font-size:1px  }
  27. /*roundCorner end*/
  28. .rc_b_fixIE6 {position:relative; height:20px; } /*解决问题的层*/
  29.   #newDiv {height:200px  ;background:#ccc;   }  /*动态追加的层*/
  30. </style>
  31. </head>
  32.  
  33. <body style="margin:10%">
  34.  
  35.                     <div class="roundCornerOuter">
  36.                         <div class="roundCornerContent">
  37.                                 <a  class="btn businessMasterAdd"
  38.                                      id="btn">点击</a><br /><br />
  39.                                 <div id="father" style="margin:0 auto;width:50px">
  40.                                 </div>
  41.                         </div>
  42.                         <div class="rc_t_m">
  43.                             <span></span>
  44.                         </div>
  45.                         <div class="rc_t_l">
  46.                         </div>
  47.                         <div class="rc_t_r">
  48.                         </div>
  49.                         <div class="rc_m_l">
  50.                             <span></span>
  51.                         </div>
  52.                         <div class="rc_m_r">
  53.                             <span></span>
  54.                         </div>
  55.                         <div class="rc_b_fixIE6">
  56.                         <div class="rc_b_m">
  57.                             <span></span>
  58.                         </div>
  59.                         <div class="rc_b_l">
  60.                         </div>
  61.                         <div class="rc_b_r">
  62.                         </div>
  63.                         </div>
  64.                     </div>
  65.  
  66. <!-- 模拟动态追加效果 -->
  67. <script language="javascript">
  68. document.getElementById("btn").onclick = function(){
  69.  var newelem = document.createElement("div");
  70.  newelem.setAttribute("id","newDiv")
  71. document.getElementById("father").appendChild(newelem);
  72. }
  73. </script>
  74. </body>
  75. </html>

BTW:这个自适应圆角DIV的制作方法初见觉得很麻烦（BI会员提供），但整理一下之后以后使用就直接复制粘贴还是很方便的。

1 comment

匿名

 二月 18th, 2009 11:20

XHTML: You can use these tags:

leave a comment