IE6絕對定位的bug及其解決辦法

IE6絕對定位的bug及其解決辦法

  IE6絕對定位的bug及其解決辦法。position:absolute定位在IE6下存在left和bottom的定位錯誤問題：

 Example Source Code

IE6下的left定位錯誤–>

<!–IE6下的left定位錯誤–>

　　上面這段代碼在IE6中定位錯誤。

　　解決辦法有兩種：

　　1、給父層設置zoom:1觸發layout。 

　　2、給父層設置寬度（width）。

 Example Source Code 

–解決方法1 zoom:1–>

–解決方法2 設置width–>

下面的這段代碼在IE6下，bottom定位錯誤：

 Example Source Code 

–IE6下的bottom定位錯誤–>

>

　　解決辦法和left定位類似：

　　方法1是給父層設置zoom觸發layout。

　　方法2是給父層設置高度（height）。

 Example Source Code

–解決方法1 zoom:1–>

–解決方法2 設置height–>

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外的任何值