1. 程式人生 > >IE6相對父容器絕對定位的bug及其解決辦法

IE6相對父容器絕對定位的bug及其解決辦法

一般相對父容器絕對定位是這樣的,子容器絕對定位,父容器設定成相對定位,就可以實現

<div style=”position:relative;border:1px solid orange;text-align:right;”>
     <a href="#”>xxxxxxx</a>
<div style=”position:absolute;top:0;left:0;background:#CCC;”>yyyyy</div>
</div>

解決辦法有兩種:
  1、給父層設定zoom:1觸發layout。 
  2、給父層設定寬度(width(定位left)/height(定位bottom))。

IE6中很多Bug都可以通過觸發layout得到解決,以上的解決方法無論是設定zoom:1還是設定width和height其實都是為了觸發layout。下列的CSS屬性或取值會讓一個元素獲得layout:        
  position:absolute 絕對定位元素的包含區塊(containing block)就會經常在這一方面出問題
  float:left|right 由於layout元素的特性,浮動模型會有很多怪異的表現
  display:inline-block 當一個內聯級別的元素需要layout的時候就往往符用到它,這也可能也是這個CSS屬性的唯一效果—-讓某個元素有layout
  width: 除auto外的任何值
  height: 除auto外的任何值
  zoom: 除auto外的任何值