IE6相對父容器絕對定位的bug及其解決辦法
阿新 • • 發佈:2019-01-01
一般相對父容器絕對定位是這樣的,子容器絕對定位,父容器設定成相對定位,就可以實現
<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外的任何值