DIV CSS 佈局教程網

事物絕非十全十美總有強差人意的一面，之前針對浮動分析了其引起文本重影的怪異問題，而作為浮動布局的最佳搭檔定位布局也存在一定的缺陷。

圍繞著定位列出的種種問題，對某些情況只是作出了分析而暫時沒有找到有解決方案，但既然知道問題所在，我們可以盡可能的采取其它措施避免這現象。

 

1. position:relative;屬性值導致overflow:hidden;失效。

    

   問題：在IE6/7中子級設置position:relative;屬性值後，導致父級的overflow:hidden;失效。Demo1
   

   分析：與定位的層級關系有關，IE6/7解析為內容已經跳出文檔流，以致父級誤以為沒有包含內容。

   解決方案：
   對於IE6可以為父級添加定位屬性糾正問題，但IE7依然無效。

2. overflow充當了position:relative的角色

    

   問題：在IE6或IE quirks模式中設定overflow:auto/hidden/scroll屬性值後，元素顯示效果相當於position:relative的相對定位效果。
   

   分析：在怪異模式與標准模式下的頁面對CSS的解析會有一定的差異甚至是扭曲了其屬性的作用，對這現象暫時還沒有沖破的能力，也只能記錄與回避了。

3. 沒有實渲染導致絕對定位的錯誤

    

   問題：在IE6中，子級元素絕對定位於父級元素時，當動態改變父級寬高時，子級位置沒有發生變化。

   分析：估計是動態改變父級寬度時，IE6並沒有實時對浏覽器渲染。暫時沒有CSS能解決這問題，但可嘗試使用JS對改變改模塊高度進行刷新解決這問題。

4. IE6中position:relative;屬性值無效

    

   問題：在IE6及以下版本，父級元素已設置position:relative;屬性值，但子級絕對定位元素沒有生效。

   分析：原因在於父級元素沒有觸發haslayout（相關資料請搜索On having layout），IE7及以上的高級浏覽器則不存在這問題。

   解決方案：
   在父級元素中添加讓其觸發haslayout的CSS屬性值。

5. 奇數引起定位的1pxBUG

    

   問題：在IE6及以下版本，父級元素寬度高度為奇數時，子級元素絕對定位於(right:0;bottom:0;)，會出現往內偏移1px的錯誤。

   分析：其真正原因還得問IE6的開發者了。但從例子中可以觀察到左上角的子級元素顯示正常，其原因為“盒子”拉伸擴展為上至下左至右，估計於此以至靠左邊或頂部的位置不會發生移動的變化。