随笔-9  评论-168  文章-266  trackbacks-0

        IE6下相对定位元素(DIV)内绝对定位元素(DIV)的偏移定位Bug问题,即绝对定位元素的相对偏移元素是谁。一般情况下,是相对于父元素以上直到DOCUMENT(默认已定位)的已定位元素(即position的设置)。但在IE6,IE5中出现的BUG却是定位在已定位元素的外围或以DOCUMENT相对而言。

在《精通CSS》30页上面有这样一段话:
引用:
相对于相对定位的祖先元素对框进行绝对定位,这在大多数现代浏览器中实现得很好。但是,在windows上的IE5.5和IE6中有一个BUG如果试图相对于相对定位的框的右边或底部设置绝对定位的框的位置,那么需要确保相对定位的框已经设置了尺寸。如果没有,那么IE会相对于画布定位这个框。简单的解决方案时为相对定位的框设置宽度和高度。

但是,如果未添加宽度,那么浏览器可能给予父元素默认的100%宽度。而若未添加高度在Firefox 3及IE 6下都无法看到绝对定位的子元素的。也就是说,IE 6下绝对定位子元素并没有相对于画布定位。

测试通过没有问题:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title></title>
  <style type="text/css">
    * { margin:0;padding:0;}
    #brading{
      position:relative;
      width:200px;   //可设置100%
      height:200px;   //可设置100%
      border:1px solid red;
      background:#ccc;
    }
    #brading .tel{
      position:absolute;
      bottom: 0;
    }
  </style>
</head>
<body>
  <div id="brading"><div class="tel">tel:000-000-999</div></div>
</body>
</html>
posted on 2011-01-13 17:52 紫蝶∏飛揚↗ 阅读(6325) 评论(1)  编辑  收藏 所属分类: CSSdiv+css+js代码

评论:
# re: IE6下相对定位元素(DIV)内绝对定位元素(DIV)的偏移定位Bug问题---外围DIV指定相对定位,内含DIV采用绝对定位,可让DIV内多个DIV块级元素任意布局[未登录] 2011-06-16 11:09 | ivy
非常感谢,重要的是让我明白了为什么定位偏移的原因~  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: